[jQuery] form 객체를 json 형태로 만들기

form 객체를 json 형태로 만들기

HTML

<form id="form">

<input type="text" id="name" name="name"/>

<input type="text" id="age" name="age"/>

<input type="button" id="btn" value="click"/>

</form>

serialize()와 serializeArray()의 차이점

$("#form").serialize();

name=seong&age=123

$("#form").serializeArray();

[{"name":"name","value":"seong"},{"name":"age","value":"123"}]

jquery를 확장하여 serializeArray()를 이용해 json obj 형태로 만들기

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// jquery 확장

jQuery.fn.serializeObject = function() {

var obj = null;

try {

// this[0].tagName이 form tag일 경우

if(this[0].tagName && this[0].tagName.toUpperCase() == "FORM" ) {

var arr = this.serializeArray();

if(arr){

obj = {};    

jQuery.each(arr, function() {

// obj의 key값은 arr의 name, obj의 value는 value값

obj[this.name] = this.value;

});

}

}

}catch(e) {

alert(e.message);

}finally  {}

return obj;

};

$("#btn").click(function(){

// 반환받은 obj를 JSON 객체로 변환

var jsonObj = JSON.stringify($("#form").serializeObject());

console.log(jsonObj);

});

});

</script>

/* serializeArray()를 받아서 반환하는 함수

<script type="text/javascript">

function objToJson(formData){

var data = formData;

var obj = {};

$.each(data, function(idx, ele){

obj[ele.name] = ele.value;

});

return obj;

}

</script> */

MappingJacksonJsonView를 이용하여 컨트롤에서 @RequestBody로 매핑할 수 있다.