jQuery ajax serializeArray() 方法

jQuery 參考手冊 Ajax

serializeArray() 方法通過序列化表單值來創(chuàng)建對象數(shù)組（名稱和值）。

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

1. 語法

$(selector).serializeArray()

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

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

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

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

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

該方法可以對已選擇單獨表單元素的對象進(jìn)行操作，比如 <input>, <textarea>, 和 <select>。不過，更方便的方法是，直接選擇 <form> 標(biāo)簽自身來進(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)頁中：

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 + " ");
});

2. 范例

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

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

jQuery 參考手冊 Ajax