Ajax 전송 시 JSON타입 data 여러 개 넘길 때 오류

오류 내용 : Ajax에서 여러 개 데이터를 보내면 Controller에서 dto로 자동 매칭시켜 데이터를 옮기고

                     싶었지만 두 개 이상의 데이터를 서버로 보낼 때 JSON타입이 아닌

                     URL 인코딩이 적용되어 전송됨 - 400 에러

 

*참고

https://kingbbode.tistory.com/28

[Jquery Plugin 소개] form 데이터를 Object로 만들기

 

 

form 데이터를 받는 Controller

@ResponseBody
	@RequestMapping(value = "/addSchedule", method = RequestMethod.POST)
	public Map<Object,Object> addSchedule(@RequestBody ScheduleDTO dto) 
    				throws Exception{
		Map<Object,Object>map = new HashMap<Object,Object>();
		
        //테스트를 위한 임시 Controller
		
		service.addSchedule(dto);
		
		
		return map;
	}

 

 

 

form 데이터를 넘기는 Ajax

function click_ok(){

	var scheduleData = JSON.stringify($('form#scheduleData').val();
    
	$.ajax({
		data : formData,
		url : "addSchedule",
		type : "POST",
		dataType : "JSON",
		contentType : "application/json; charset=UTF-8",
		success : function(data) {
			console.log(data);
			window.close();
		}
	});
};

 

 

 

전송되는 값 캡쳐

  

 

 

해결

 

 

여러 개 데이터를 전송 시킬 땐 jquery의 serializeObject 를 사용하면 form의 데이터를 json으로 바꿔준다고 함.

serializeObject는 함수를 구현하는 것과 플러그인을 사용하는 두 가지 방법이 있다.

 

serializeObject 함수를 이용한 from 데이터 전송

$.fn.serializeObject = function(){
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
    	var name = $.trim(this.name),
    		value = $.trim(this.value);
    	
        if (o[name]) {
            if (!o[name].push) {
                o[name] = [o[name]];
            }
            o[name].push(value || '');
        } else {
            o[name] = value || '';
        }
    });
    return o;
};

function click_ok(){
	var scheduleData = JSON.stringify($('form#scheduleData').serializeObject());
	
	$.ajax({
		data : scheduleData,
		url : "addSchedule",
		type : "POST",
		dataType : "JSON",
		contentType : "application/json; charset=UTF-8",
		success : function(data) {
			console.log(data);
			window.close();
		}
	});
};

 

 

 

 

 

-끝-