JQuery中serialize()serializeArray()和param()的使用方法

Posted 2020-06-21 RC7

1. serialize()方法
语法：$(selector).serialize()
输出序列化表单的字符串，文件上传控件（例如：<input type="file" name="myfile"/>）类型的表单数据会被自动忽略，也就是说不会出现在序列化字符串中。

比如有下面这样的一个表单，用$("form").serialize()序列化后得到的结果是：a=1&b=2&c=3

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>  
  <div><input type="file" name="myfile"/></div>
</form>

serialize() 方法也可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>，只需要修改selector就可以了。

2. param()方法
这个方法很简单，就是序列化一个key/value对象，请看下面的例子：

var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);

结果：
width=1680&height=1050

3. serializeArray()方法
serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。
你可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。
serializeArray() 方法序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据。
注意：此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。举例来说：

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

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