jQuery1.9(辅助函数)学习之—— jQuery.param( obj ); 编辑

浏览数：22 / 时间：2015年06月09日

jQuery.param( obj ); 返回一个String

描述: 创建一个数组或对象序列化的的字符串，适用于一个URL 地址查询字符串或Ajax请求。

jQuery.param( obj );

obj

类型: Array, Object

用于数组或序列化的对象。

jQuery.param( obj, traditional );

obj

类型: Array, Object

用于数组或序列化的对象。
traditional

类型: Boolean

一个布尔值，指示是否执行了传统的“shallow”的序列化。

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

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

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

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

    [{name:"first",value:"Rick"},  
    {name:"last",value:"Astley"},  
    {name:"job",value:"Rock Star"}]

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

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

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

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

    var myObject = {  
            a:{  
                one:1,  
                two:2,  
                three:3  
            },  
            b:[1,2,3]  
        };  
      
    var recursiveEncoded = $.param(myObject);  
    var recursiveDecoded = decodeURIComponent($.param(myObject));  
      
    alert(recursiveDecoded);  
    alert(recursiveEncoded);

recursiveEncoded 和 recursiveDecoded 的结果如下：

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：

    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);

shallowEncoded 和 shallowDecoded 的结果如下：

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

例子:

    <!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:

width=1680&height=1050

序列号一些复杂的对象:

    // <=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"