헤르메스 LIFE

[JSON] serialize(), serializeArray() 본문

JSP&JavaScript&HTML

[JSON] serialize(), serializeArray()

헤르메스의날개 2020. 11. 20. 01:50
728x90

jquery 에서 form serialize를 이용하여 json 을 만들수 있습니다.

먼저 serialize 에 대해서 간단히 설명하겠습니다.

 

serialize 함수는 2개가 있습니다.

 

첫번째로 serialize() 입니다.

 

URL-encoded 표기법으로 form 의 객체들을 텍스트화 하고 그 결과를 return 합니다.

형식은 inputName=inputValue&inputName2=inputValue2 입니다.

 

두번쨰로 serializeArray() 입니다.

 

Json 문자열 형태의 배열을 return 합니다.

 

형식은 [{name:"name",valeu:"valeu"},{name:"name2",value:"value2"}] 입니다.

 

지금 만들 형식은 { inputName:"inputVlaue", inputName2:"inputValue2" } 와 같은 Json 형태입니다.

    
var data2 = ${"form"}.serialize();
console.log(data2);               // 결과 : a=1&b=2&c=3&d=4&e=5

var data3 = $('form').serializeArray(); // form의 입력데이터를 배열의 Object형태로 만들어준다.
console.log(data3);

/* 결과 :   [Object, Object, Object, Object, Object]

    0: Object name: "a"value: "1"

    1: Object name: "b"value: "2"

    2: Object name: "c"value: "3"

    3: Object name: "d"value: "4"

    4: Object name: "e"value: "5"

    length: 5

*/

 

//-------------------------------------------------------------------------------------------------------------------------------- // JSON.stringify 와 JSON.parse는 jQuery 메서드는 아니지만 유용하게 쓰인다. 참고...

 

var json_str = JSON.stringify(data3); // Obejct(리터럴)을 json문법에 맞게 string 타입으로 변형
console.log(json_str)  
//결과 : '[{"name":"a","value":"1"},{"name":"b","value":"2"},{"name":"c","value":"3"},{"name":"d","value":"4"},{"name":"e","value":"5"}]' //string
var json_obj = JSON.parse(json_str); // json문법의 string을 배열의 Object형태로 변형
console.log(json_obj)                // 결과는 data3과 같다.    //object
728x90