Form에서 POST방식으로 전송한 데이터를 SpringBoot Controller에서 VO(DTO)객체로 받고 싶은데 오류가 발생..
Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supporteted
처음엔 Form에서 json형식을 지원해줄 거라 믿고 간단하게 해결할 수 있을 거라 생각했는데
미친듯이 구글링을 한 결과 Form 형식으로 Controller에게 POST방식으로 데이터를 전달할 방법은 없다..
따라서 아래 처럼 해결해 줘야 한다.
Form 데이터 -> Json 데이터로 변경
: serializeObject() 사용 [ 의존성 추가해주거나 직접 구현해야 함. 예시에선 의존성 추가 ]
- var data = $('#InsertForm').serializeObject();
: form data를 받아와서 Json data로 변경시켜준다.
insert.html
<form action="/board/insert" method="post" id="InsertForm">
<input class="form-control" type="text" name="boardTitle" placeholder="title" />
<input class="form-control" name="boardContent" type="text" placeholder="content" />
<input type="button" class="btn btn-primary btn-block" value="Create Account" onclick="Post();"></div>
</form>
<th:block th:replace="common/common_script"></th:block>
<script th:inline="javascript">
function Post(){
var data = $('#InsertForm').serializeObject();
console.log(data)
$.ajax({
url : '/board/insert',
type : 'POST',
data : JSON.stringify(data),
contentType:"application/json",
success : function(data) {
console.log(data.code);
}
})
}
</script>
※ form 형식에서 text 값을 입력받을 때 주로 id="boardTitle"이런 식으로 값을 지정해주는데 serializeObject()를 사용할 때는 id -> name 으로 변경해줘야 한다 id ="boardTitle" -> name = "boardTitle"
serializeObject() 의존성 추가
1) Data 다운로드
: https://github.com/macek/jquery-serialize-object
GitHub - macek/jquery-serialize-object: Converts HTML form into JavaScript object
Converts HTML form into JavaScript object. Contribute to macek/jquery-serialize-object development by creating an account on GitHub.
github.com
2) Eclipse에 적용
: 다운로드 받은 파일 압축을 푼다.
: dist 폴더에 jquery.serialize-object.min.js 파일을 확인한다.
: 해당 파일을 Eclipse의 src/main/resources/static/js 에 저장한다.
3) script 선언
: 하단의 내용을 추가해준다.
( 예시에서는 스크립트를 따로 모아뒀는데 <head></head> 사이에 선언해줘도 된다. )
common_script
<script th:src="@{/js/jquery-3.6.0.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.serialize-object.min.js}"></script>'Spring' 카테고리의 다른 글
| [Spring Boot] Quartz - RAM Job Store 예제 (0) | 2021.05.05 |
|---|
