jQuery.param()函数详解
jQuery.param()函数⽤于将⼀个JS数组或纯粹的对象序列化为字符串值,以便⽤于URL查询字符串或AJAX请求。
如果传⼊的不是数组或"纯粹的对象",则返回空字符串("");如果传⼊的是null、undefined等⽆法访问属性的值,则直接报错。
所谓"纯粹的对象",就是通过{}或new Object()⾃⾏创建的对象。JS内置的Boolean、Number、String、Date、RegExp、Function、Window等类型的对象都不算是"纯粹的对象"。
返回的字符串已经过URL编码处理(采⽤的字符集为UTF-8)。
该函数属于全局的jQuery对象。
语法
jQuery 1.2 新增该静态函数。
jQuery.param( obj [, traditional ] )
参数
参数描述
obj String类型需要被序列化的JS对象。
traditional Boolean类型指⽰是否执⾏⼀个传统的"浅层"序列化
请注意参数traditional的值,如果为false,它将递归处理包含嵌套内容的深层对象;如果为true,则对属性值或元素直接浅层处理,不进⾏递归处理。
从jQuery 1.8开始,jQuery.param()默认值为false。为了最好的跨版本兼容性,请在调⽤该函数时,明确指定第⼆个参数,⽽不要使⽤默认值。
如果参数obj是⼀个数组,那么它的每个元素都必须是⼀个包含name属性和value属性的对象(value属性可以没有,默认其值为undefined)。
// 每个元素必须是包含name和value属性的对象(也可以有其他属性,但不会被处理)
// jQuery会将name属性值⽤作参数名,value属性值⽤做参数值。
[
{ name: "name", value: "CodePlayer" },
{ name: "age", value: 18 },
{ name: "job", value: "Developer", company: "家⾥蹲" }
]
// 字符串将被看作⼀个字符数组
var v10 = $.param( "name" ); // "0=n&1=a&2=m&3=e"
$.param是将对象参数化,使⽤特别灵活,直接上代码吧:
jquery版本为最新版:jquery字符串截取
<script src="code.jquery/jquery-3.2.1.min.js"></script>
1.直接传递⼀个obj,直接转化成key=value然后⽤&连接起来
$.param({name:'bill',age:18});
结果:name=bill&age=18
这⾥的{X:Y,A:B}会变成X=Y&A=B的格式
2.name value键值对组成的数组,这个好说,name=value然后⽤&拼起来
$.param([
{name:'name',value:'bill'},
{name:'age',value:18}
]);
结果:name=bill&age=18
这⾥的name:'name'两个name是不同的,name value是固定格式
这⾥的{name:XXX,value:YYY} 会变成XXX=YYY的格式,⽐起上⾯的写法,显得更啰嗦
3.当name出现相同的时候
$.param([
{name:'name',value:'bill'},
{name:'name',value:'tom'}
]);
结果:name=bill&name=tom
这样的话,有些后端语⾔是取不到两个name的
4.如果传递的对象中的⼀个属性为数组
$.param([
{
name:'name',
value:['bill','tom']
}
]);
结果:name=bill%2Ctom
返回的字符串已经过URL编码,原始字符串为:
ame=bill,tom
但是","号被URL转义为"%2C"
这⾥使⽤$.param(data)和$.param(data,true)是⼀样的,都会把","号转义
5.
$.param({
name:['bill','tom'],
age:[18,19],
sex:["male","female"]
});
结果:
name%5B%5D=bill&name%5B%5D=tom&age%5B%5D=18&age%5B%5D=19&sex%5B%5D=male&sex%5B%5D=female 返回的字符串已经过URL编码,原始字符串为:
name[]=bill&name[]=tom&age[]=18&age[]=19&sex[]=male&sex[]=female
name,age,sex被⾃动加上中括号了,其中"["转义为:"%5B " ,"]"转义为"%5D"
如果使⽤$.param(data,true),这⾥的结果将会是:
name=bill&name=tom&age=18&age=19&sex=male&sex=female
这个结果刚好是java后台接受需要的格式
6.
$.param([
{name:'name',value:['bill','tom']},
{name:"age",value:[18,19]},
{name:"sex",value:["male","female"]}
])
结果:name=bill%2Ctom&age=18%2C19&sex=male%2Cfemale
返回的字符串已经过URL编码,原始字符串为:
name=bill,tom&age=18,19&sex=male,female,
其中","号⼜被转义了
7.
var array = [
{ name: "name", value: "张三" },
{ name: "age", value: 18, extra: "忽略该属性" },
{ name: "grade" }, // 没有value属性,则value值为undefined,将被转为空字符串""
{ name: "orderId", value: 2 },
{ name: "orderId", value: 3 },
];
var v12 = $.param( array );
返回UTF-8编码,结果为: name=%E5%BC%A0%E4%B8%89&age=18&grade=&orderId=2&orderId=3 8.
// jQuery将数组的每个元素视作对象,并调⽤其name和value属性
// 由于这些元素没有name属性,所以为undefined,并被转为字符串"undefined"
// 由于这些元素没有value属性,所以为undefined,并被转为空字符串""
var v13 = $.param( [ "name", 2, 3 ] );
结果为:undefined=&undefined=&undefined=
9.
var v14 = $.param({
name:"Jim",
age: function(){ return 18; }
});
// 1.3之前返回:"name=Jim&age=function+()%7B+return+18%3B+%7D"
// 1.3+返回:"name=Jim&age=18"
10:深层序列化
// 返回的字符串已经过URL编码,原始字符串为:"name=CodePlayer&age=18&uid[]=2&uid[]=3&uid[]=5"
var obj1 = {
name:'CodePlayer',
age:18,
uid:[2,3,5]
};
var complexV = $.param(obj1 , false ); //"name=CodePlayer&age=18&uid%5B%5D=2&uid%5B%5D=3&uid%5B%5D=5"
// 传统的浅层序列化
var simpleV = $.param(obj1 , true );
// "name=CodePlayer&age=18&uid=2&uid=3&uid=5"
var obj2 = {
name: "Jim",
options: {age: 18, global: true, uid: [1, 2, 3] }
};
// 原始字符串为:
"name=Jim&options[age]=18&options[global]=true&options[uid][]=1&options[uid][]=2&options[uid][]=3"
complexV = $.param(obj2, false );
//"name=Jim&options%5Bage%5D=18&options%5Bglobal%5D=true&options%5Buid%5D%5B%5D=1&options%5Buid%5D%5B%5D=2&options%5Buid%5D%5B%5
// 原始字符串为:"name=Jim&options=[object Object]"
simpleV = $.param(obj2, true );
// "name=Jim&options=%5Bobject+Object%5D"
var obj3 = [
{ name: "names", value: { first:"Jim", second:"W", last:"Green" } },
{ name: "uid", value: [ { name: "a", value: 1}, "James" ] }
];
/* 数组始终不会递归处理(即$.param如果传递的参数为数组,就只会拼接name=vlaue,⽽不会递归处理vlaue值)*/
// 原始字符串为:"names=[object Object]&uid=[object Object],James"
complexV = $.param(obj3, false ); // "names=%5Bobject+Object%5D&uid=%5Bobject+Object%5D%2CJames"
// 原始字符串为:"names=[object Object]&uid=[object Object],James"
simpleV = $.param(obj3, true ); // "names=%5Bobject+Object%5D&uid=%5Bobject+Object%5D%2CJames"
总结:对于传递的参数为⼀个数组,使⽤$.param(data),$.param(data,true)没有区别;如果传递的是⼀个对象,对象的某个属性为数组,那么使
⽤$.param(data,true)可以转化为java后台接受需要的格式,$.param(data)则会有问题
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论