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 형태의 데이터로 변경할 수 있다.

반응형