serializeArray()


version 1.2 以降

解説

form要素をシリアライズし、配列を返します。

各フォームの要素から、{name="elem_name", value="elem_value"}形式のハッシュを作成し、その配列を返します。
例えば、以下のような配列を返します。

[
  {name: "text1", value: "value1"},
  {name: "text2", value: "value2"}
]

戻り値

  • form要素をシリアライズした配列

例1:フォーム要素をシリアライズし、値を表示します。 (テスト結果のフォーム内容を変更して「テスト」ボタンをクリックしてください。)

$(".disp").empty();
$.each($("#test_result form").serializeArray(), function(i, elem){
    $(".disp")
        .append(elem.name + ": " + elem.value)
        .append("<br/>")
});

[text1]
[text2]

[fruit]
りんご みかん もも


$.ajax(options)等でのデータ処理

$.ajax(options)等のAjax通信メソッドで、serializeArray()で生成する形式の配列が渡されると、内部的には以下のようにしてapplication/x-www-form-urlencoded形式に変換されます。

var s = [];
jQuery.each(a, function(){
    s.push(encodeURIComponent(this.name) + "=" + encodeURIComponent(this.value));
});
s.join("&").replace(/%20/g, "+");