jQuery ajax - serializeArray() 方法

实例

输出以数组形式序列化表单值的结果：

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

定义和用法

serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。

您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。

语法

  1. $(selector).serializeArray()

详细说明

serializeArray() 方法序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据。

注意：此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。举例来说：

  1. [ 
  2.   {name: 'firstname', value: 'Hello'}, 
  3.   {name: 'lastname', value: 'World'},
  4.   {name: 'alias'}, // 值为空
  5. ]

.serializeArray() 方法使用了 W3C 关于 successful controls（有效控件） 的标准来检测哪些元素应当包括在内。特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

该方法可以对已选择单独表单元素的对象进行操作，比如 <input>, <textarea>, 和 <select>。不过，更方便的方法是，直接选择 <form> 标签自身来进行序列化操作。 

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

上面的代码产生下面的数据结构（假设浏览器支持 console.log）：

  1. [
  2.   {
  3.     name: a
  4.     value: 1
  5.   },
  6.   {
  7.     name: b
  8.     value: 2
  9.   },
  10.   {
  11.     name: c
  12.     value: 3
  13.   },
  14.   {
  15.     name: d
  16.     value: 4
  17.   },
  18.   {
  19.     name: e
  20.     value: 5
  21.   }
  22. ]

示例

取得表单内容并插入到网页中：

HTML 代码：

  1. <p id="results"><b>Results:</b> </p>
  2. <form>
  3.   <select name="single">
  4.     <option>Single</option>
  5.     <option>Single2</option>
  6.   </select>
  7.   <select name="multiple" multiple="multiple">
  8.     <option selected="selected">Multiple</option>
  9.     <option>Multiple2</option>
  10.     <option selected="selected">Multiple3</option>
  11.   </select><br/>
  12.   <input type="checkbox" name="check" value="check1"/> check1
  13.   <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  14.   <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  15.   <input type="radio" name="radio" value="radio2"/> radio2
  16. </form>

jQuery 代码：

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