jQuery.param()


jQuery.param( obj )返回: String

描述: 创建一个数组,一个普通的对象,或一个jQuery对象的序列化表示形式,用于URL查询字符串或Ajax请求。 如果传递一个jQuery对象传递,它应该包含输入元素(愚人码头注:input,textarea等)的名称/值属性。

  • 添加的版本: 1.2jQuery.param( obj )

    • obj
      类型: ArrayPlainObjectjQuery
      一个用来序列化的一个数组,一个普通的对象,或一个jQuery对象。
  • 添加的版本: 1.4jQuery.param( obj, traditional )

    • obj
      类型: ArrayPlainObjectjQuery
      一个用来序列化的一个数组,一个普通的对象,或一个jQuery对象。
    • traditional
      类型: Boolean
      一个布尔值,指示是否执行了传统的“shallow”的序列化。

这个函数 可以将表单元素的值 转换为 序列化字符串 (更多细节查阅 .serialize() )。

在 jQuery 1.3中, 这个函数的返回值被用来代替函数作为一个字符串。

在 jQuery 1.4中, $.param() 方法将会通过深度递归的方式序列化对象,以便符合现代化脚本语言和框架的需求,比如 PHP 和 Ruby on Rails。 你可以通过设置 jQuery.ajaxSettings.traditional = true;废除这个全局功能。

在jQuery 3.0中,$.param()方法,不再使用jQuery.ajaxSettings.traditional 作为其默认设置,将默认为 false。对于最好的跨版本兼容性,调用 $.param()时传递明确的值给第二个参数,不使用默认值。

如果传递的对象是一个数组,它必须是一个对象数组,其格式要跟.serializeArray()返回的格式一样:

1
2
3
4
5
[
{ name: "first", value: "Rick" },
{ name: "last", value: "Astley" },
{ name: "job", value: "Rock Star" }
]

注意: 因为一些框架解析序列化的数字的能力有限, 在传递 obj 参数时我们应该谨慎,尽量不要传递含有对象的数组,或者数组中嵌套其它数组。

注意: 由于目前对序列化字符串没有统一的规约,此方法无法对复杂数据结构进行编码,使之可以支持所有语言。在此之前,$.param 方法将继续保持其目前的形式。

在 jQuery 1.4 HTML5中input元素也是序列化的元素。

我们可以显示一个对象的查询字符串 和一个相应的URI-decoded 版本,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);

recursiveEncodedrecursiveDecoded 的结果如下:

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

在jQuery1.4之前,要模仿$.param()的行为,我们可以设置 traditional 参数为 true

1
2
3
4
5
6
7
8
9
10
11
12
13
var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);
alert(shallowEncoded);
alert(shallowDecoded);

shallowEncodedshallowDecoded 的结果如下:

a=%5Bobject+Object%5D&b=1&b=2&b=3
a=[object+Object]&b=1&b=2&b=3

例子:

Example: 序列化一个 key/value 对象./span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="results"></div>
<script>
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);
</script>
</body>
</html>

Demo:

Example: 序列号一些复杂的对象

1
2
3
4
5
6
7
8
9
10
// <=1.3.2:
$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"
// >=1.4:
$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
// <=1.3.2:
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a=[object+Object]&d=3&d=4&d=[object+Object]"
// >=1.4:
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"