JQuery serialize( ), serializeArray( ) 그리고 serializeObject( )
※ 다른 사이트에 더 설명이 잘 된 내용이 많습니다.
- 기능 정의 - Serialize
아래의 코드 참조~~~
결과를 보면 <form> 태그 내부의 데이터들이 정상적으로 쿼리스트링 형태로 변경되었음을 볼 수 있습니다.
(쿼리스트링으로 변경되는 값들은
하지만, serialize는 같은 key에 대해서 보다시피
name=Park&name=Kim&name=Hong 과 같이 표현한다.
즉, 동일한 key에 대해 3개의 value가 해당하는데, 이를 배열로 바꿔주지 못한다.
결국 serialize 메서드는 동일한 name(key)를 가지지 않는 값을 쿼리스트링으로 만들때만 유용하게 사용할 수 있다.
- 기능 정의 - serializeArray
결과를 보면, 아래와 같은 구조를 가짐을 알 수 있다.
[
{
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 메소드를 몰랐던 이전에 쿼리스트링을 만들기 위해 짠 코드를 기억이...................