JQuery serialize( ), serializeArray( ) 그리고 serializeObject( )

※ 다른 사이트에 더 설명이 잘 된 내용이 많습니다.

• 기능 정의 - Serialize

JQuery에서 제공하는 기능인 serialize 메서드는 <form> 태그 내부의 값을 name=value으로 변경하면서 쿼리 스트링을 만들어준다.

아래의 코드 참조~~~

결과를 보면 <form> 태그 내부의 데이터들이 정상적으로 쿼리스트링 형태로 변경되었음을 볼 수 있습니다.

(쿼리스트링으로 변경되는 값들은 

하지만, serialize는 같은 key에 대해서 보다시피

 name=Park&name=Kim&name=Hong 과 같이 표현한다.

즉, 동일한 key에 대해 3개의 value가 해당하는데, 이를 배열로 바꿔주지 못한다.

결국 serialize 메서드는 동일한 name(key)를 가지지 않는 값을 쿼리스트링으로 만들때만 유용하게  사용할 수 있다.

---

• 기능 정의 - serializeArray

<form> 태그 내부의 값을 JSON 형태의 문자열을 배열로 리턴한다.

아래의 코드 참조~~~

결과를 보면, 아래와 같은 구조를 가짐을 알 수 있다.

[

{

name: 'name',

value: 'Park'

},

{

name: 'name',

value: 'Kim'

},

{

name: 'name',

value: 'Hong'

},

{

name: 'age',

value: 13

},

]

하지만, 실제로 서버로 보내야할 스펙은 아래와 같이 JSON 객체를 전달하고 싶다고 한다면?

{

student : [

{

name: 'name',

value: 'Park'

},

{

name: 'name',

value: 'Kim'

},

{

name: 'name',

value: 'Hong'

},

{

name: 'age',

value: 13

}

]

}

기존의 serialize는 쿼리스트링 형태만 만들어지고, serializeArray로는 개별적인 name:value 형식의 JSON 밖에 쓰지 못한다.

이런 경우 serializeObject를 사용한다.

• 기능 정의 - SerializeObject

아래의 코드 참조~~

해당 serializeObject 메소드를 실행한 결과는 아래와 같다.

---

이렇게 생성해서 <form> 태그의 데이터를 동기적/비동기적으로 전달하는 경우에

전달할 데이터에 대해 개별적인 조치를 취하지 않더라도,

<form> 태그의 내부에 submit 되는 데이터들을 쿼리스트링으로, 배열로, 객체로 전달할 수 있다는 것.

serialize 메소드를 몰랐던 이전에 쿼리스트링을 만들기 위해 짠 코드를 기억이...................