jQuery学习笔记：jQuery Ajax 14：serializeArray()方法

jQuery Ajax：serializeArray()方法

 

主要参考：

《锋利的jQuery》单东林、张晓菲、魏然

www.3cschool.com.cn之《jQuery 参考手册 - Ajax》

 

搜集整理：sagahu@163.com

 

简单示例

 

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

 

$("button").click(function(){

       x=$("form").serializeArray();

       $.each(x, function(i, field){

              $("#results").append(field.name + ":" + field.value + " ");

       });

});

 

定义

 

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

 

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

 

语法

 

. serializeArray ()

 

参数	说明
无参数
返回值	jQuery

 

详细说明

 

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

 

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

 

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

 

[

  {name: 'firstname', value: 'Hello'},

  {name: 'lastname', value: 'World'},

  {name: 'alias'}, // 值为空

]

 

.serializeArray() 方法使用了 W3C关于 successful controls（有效控件） 的标准来检测哪些元素应当包括在内。特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当含有 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>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 + " ");

});