實(shí)例

輸出以數(shù)組形式序列化表單值的結(jié)果：

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

親自試一試

定義和用法

serializeArray() 方法通過(guò)序列化表單值來(lái)創(chuàng)建對(duì)象數(shù)組（名稱(chēng)和值）。

您可以選擇一個(gè)或多個(gè)表單元素（比如 input 及/或 textarea），或者 form 元素本身。

語(yǔ)法

$(selector).serializeArray()

詳細(xì)說(shuō)明

serializeArray() 方法序列化表單元素（類(lèi)似 .serialize() 方法），返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。

注意：此方法返回的是 JSON 對(duì)象而非 JSON 字符串。需要使用插件或者第三方庫(kù)進(jìn)行字符串化操作。

返回的 JSON 對(duì)象是由一個(gè)對(duì)象數(shù)組組成的，其中每個(gè)對(duì)象包含一個(gè)或兩個(gè)名值對(duì) —— name 參數(shù)和 value 參數(shù)（如果 value 不為空的話）。舉例來(lái)說(shuō)：

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值為空]

.serializeArray() 方法使用了 W3C 關(guān)于 successful controls（有效控件） 的標(biāo)準(zhǔn)來(lái)檢測(cè)哪些元素應(yīng)當(dāng)包括在內(nèi)。特別說(shuō)明，元素不能被禁用（禁用的元素不會(huì)被包括在內(nèi)），并且元素應(yīng)當(dāng)有含有 name 屬性。提交按鈕的值也不會(huì)被序列化。文件選擇元素的數(shù)據(jù)也不會(huì)被序列化。

該方法可以對(duì)已選擇單獨(dú)表單元素的對(duì)象進(jìn)行操作，比如 <input>, <textarea>, 和 <select>。不過(guò)，更方便的方法是，直接選擇 <form> 標(biāo)簽自身來(lái)進(jìn)行序列化操作。

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

上面的代碼產(chǎn)生下面的數(shù)據(jù)結(jié)構(gòu)（假設(shè)瀏覽器支持 console.log）：

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

示例

取得表單內(nèi)容并插入到網(wǎng)頁(yè)中：

HTML 代碼：

<p id="results"><b>Results:</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 + " ");
});