jQuery ajax - serializeArray() 메서드

jQuery Ajax 참조 설명서

예제

표单 값의 시리얼라이즈된 배열 형태로 출력합니다：

$("button").click(function(){
  x=$("form").serializeArray();
  $.each(x, function(i, field){
    $("#results").append(field.name + ":" + field.value + " ");
  );
);

직접 시도해 보세요

정의와 사용법

serializeArray() 메서드는 표单 값을 시리얼라이즈하여 객체 배열(이름과 값)을 생성합니다.

표单 요소(예: input 및/또는 textarea) 또는 표单 자체를 선택할 수 있습니다.

문법

$(선택자).serializeArray()

상세 설명

serializeArray() 메서드는 표单 요소를 시리얼라이즈합니다(예: .serialize() 메서드），JSON 데이터 구조 데이터를 반환합니다.

주의:이 메서드는 JSON 객체를 반환합니다. JSON 문자열화 작업을 수행하려면 플러그인이나 제3자 라이브러리를 사용해야 합니다.

반환하는 JSON 객체는 이름과 값(값이 비어 있지 않을 경우)을 포함하는 객체 배열로 구성되어 있습니다. 예를 들어:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 값이 비어 있습니다
]

.serializeArray() 메서드는 W3C에 관한 성공된 컨트롤의 표준을 사용하여 포함되어야 할 요소를 검사합니다. 특히, 요소는 비활성화되지 않아야 하며(비활성화된 요소는 포함되지 않습니다) name 속성을 가지고 있어야 합니다. 제출 버튼의 값도 시리얼라이즈되지 않습니다. 파일 선택 요소의 데이터도 시리얼라이즈되지 않습니다.

이 메서드는 선택된 단일 표单 요소 객체를 처리하는 데 사용됩니다. 예를 들어 <input>, <textarea>, 및 <select>입니다. 그러나, 더 편리한 방법은 직접 <form> 태그 자체를 선택하여 시리얼라이즈 작업을 수행하는 것입니다. 

$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
);

위의 코드는 다음과 같은 데이터 구조를 생성합니다（브라우저가 console.log를 지원하는 경우）：

[
  {
    name: a
    value: 1
  },
  {
    name: b
    value: 2
  },
  {
    name: c
    value: 3
  },
  {
    name: d
    value: 4
  },
  {
    name: e
    value: 5
  }
]

예제

폼 내용을 가져와 웹 페이지에 삽입합니다:

HTML 코드:

<p id="results"><b>결과:</b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

jQuery 코드:

var fields = $("select, :radio").serializeArray();;
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
);

jQuery Ajax 참조 설명서