[jQuery] serialize() 데이터 전송하기

1. serialize()

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

<form name="dataForm" id="dataForm">
  <input type="hidden" name="name" value="Yoon">
  <input type="hidden" name="name" value="Dong">
  <input type="hidden" name="name" value="Gi"> 
  <input type="hidden" name="age" value="26">
</form>
<div name="resultDiv" id="resultDiv">
  
</div>

var serialize = $('#dataForm').serialize();
// id가 dataForm인 form의 내부 값을 직렬화 처리한다.

$('#resultDiv').html(serialize);

• Result ->
  name=Yoon&name=Dong&name=Gi&age=26

결과값을 보면 form 태그 내부의 데이터들이 정상적으로 쿼리스트링 형태로 변경되었다.
그러나, serialize는 동일한 key에 대해 3개의 value가 해당하는데, 이를 배열로 바꿔주지 못한다.
결국 serialize 메서드는 동일한 name(key)를 가지지 않는 값을 쿼리스트링으로 만들때만 유용하게 사용할 수 있다.

2. serializeArray

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

<form name="dataForm" id="dataForm">
  <input type="hidden" name="name" value="Yoon">
  <input type="hidden" name="name" value="Dong">
  <input type="hidden" name="name" value="Gi"> 
  <input type="hidden" name="age" value="26">
</form>
<div name="resultDiv" id="resultDiv">
  
</div>

var serializeArray = $('#dataForm').serializeArray();

$('#resultDiv').html(JSON.stringify(serializeArray));

• Result ->
  [{"name":"name","value":"Yoon"},{"name":"name","value":"Dong"},{"name":"name","value":"Gi"},{"name":"age","value":"26"}]

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

[

  {

    name: 'name',

    value: 'Park'

  },

  {

    name: 'name',

    value: 'Kim'

  },

  {

    name: 'name',

    value: 'Hong'

  },

  {

    name: 'age',

    value: 13

  },

]