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）またはフォーム要素自体を選択することができます。

文法

$(selector).serializeArray()

詳細説明

serializeArray()メソッドは、フォーム要素（例えば、 .serialize()メソッド）、JSONデータ構造データを返します。

注意：このメソッドはJSONオブジェクトを返しますが、JSON文字列に変換するにはプラグインまたはサードパーティーのライブラリを使用する必要があります。

返される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>シングル</option>
    <option>シングル2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">マルチプル</option>
    <option>マルチプル2</option>
    <option selected="selected">マルチプル3</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 リファレンスマニュアル