[spring] ajax로 formData 전달 시 VO로 값을 못 받는 현상

Nux·2022년 5월 20일
0
post-thumbnail

오류 경위

  • form 내부의 input에 작성한 데이터를 FormData에 담아 ajax로 전달하고자 함
  • Console로 확인 결과, Controller에 데이터가 넘어가지 않음
    • view단에서는 정상적으로 success 로직이 실행됨

View

$("#regi-btn").click(function(){
	var form = $("#regiForm")[0];
	var data = new FormData(form);
	$.ajax({
		type:"post",
		url: "/insert.do",
		data: data,
	    dataType: 'json',
	    contentType: false,			
	    processData: false,
		cache: false,
		success:function(data){
			alert("성공");
		}
	})  // ajax 끝
}) // click이벤트 끝

Controller

@ResponseBody
@RequestMapping(value="/insert.do", method=RequestMethod.POST)
public String insertInfo(TestVO testVo) throws Exception{
	System.out.println(testVo);
	return "1111";
}

해결

VO파일 내 변수 초기화, ajax 모든 옵션(cache, dataType method등) 수정,
Controller단에서 매개변수에 @ModelAttribute, @ReponseBody 등 어노테이션 변경
거의 관련된 모든 소스를 건드렸는데도 해결되지 않음

결론적으로는 설정문제.
pom과 dispatcher-servlet에 아래를 각각 추가해주니 정상 작동됨

1. pom
<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.4</version>
</dependency>

2. dispatcher-servlet
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

FormData메서드가 받아온 form 데이터를 파일처럼 취급하기 때문에 파일 업로드 관련 설정을 추가하니 정상적으로 데이터가 넘어가는 것을 확인 할 수 있었다.

추가

  • FormData로 객체 전달 시, input type="number"는 공백으로 두면 에러가 발생하므로 주의
    • text는 빈 값도 잘 전달됨

참고 https://velog.io/@yoonee1126/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-FormData

0개의 댓글