• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • jQuery.param()

    创建适合在URL查询字符串或Ajax请求中使用的数组,纯对象或jQuery对象的序列化表示形式。如果传递了jQuery对象,则它应包含具有名称/值属性的输入元素。

    jQuery.param(obj)
    • obj类型:Array 或 PlainObject或 jQuery。一个用来序列化的一个数组,一个普通的对象,或一个jQuery对象。
    jQuery.param(obj, traditional)
    • obj类型:Array 或 PlainObject或 jQuery。一个用来序列化的一个数组,一个普通的对象,或一个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()返回的格式一样:

    [
      { 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(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

    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

    例子

    序列化一个 key/value 对象

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { color:red; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    

    序列号一些复杂的对象

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

    上篇:serializeArray()