JavaScript/JQuery
[JQuery] Form 태그 데이터 JSON 형태로 넘기기
BBB.OOO
2022. 12. 13. 13:36
반응형
jquery 의 form 태그 데이터 전달방법에는 2가지 방법이 있다.
$("#form 태그 id").serialize() 와 $("#form 태그 id").serializeArray() 가 있다.
$("#form 태그 id").serialize()
$("#form 태그 id").serialize();
// 결과
a=123&b=456&c=789
$("#form 태그 id").serializeArray()
$("#form 태그 id").serializeArrary();
// 결과
[{name: 'a', value: '123'}, {name: 'b', value: '456'}, {name: 'c', value: '789'}]
위처럼 일반 parameter 또는 배열처럼 데이터가 전달되기 때문에 Java 의 Model 로 받을 수 없다.
또한 Form 태그 데이터가 많을수록 object 에 직접 하나하나 담을수 없으므로 jquery 의 프로토타입 함수를 사용하여
json 형태 데이터로 전달한다. javascript 프로토타입이 아닌 jquery 프로토타입을 설정해서 사용한다.
아래는 테스트 코드이다.
JQuery 프로토타입 함수 설정($.fn.serializeObject())
HTML
<form id="form_test">
<input type="text" id="test1" name="test1"><br>
<input type="text" id="test2" name="test2"><br>
<input type="text" id="test3" name="test3"><br>
<input type="text" id="test4" name="test4"><br>
</form>
<button type="button" id="insert" onclick="form_insert()">입력</button>
Javascript
let form_insert = function(){
console.log($("#form_test").serializeObject());
}
$.fn.serializeObject = function(){
var obj = new Object();
var arr = this.serializeArray();
arr.forEach(function(data, index){
obj[data.name] = data.value;
})
return obj;
}
//결과
{test1: '123', test2: '456', test3: '789', test4: '567'};
위와 같이 form 태그 데이터를 json 형태의 데이터로 변경할 수 있다.
반응형