jQuery param() 方法

怼烎@ 2021-07-04 14:14 362阅读 0赞

## 实例 ##

序列化一个 `key/value` 对象：

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

结果:

width=1680&height=1050

### TIY 实例 ###

输出序列化对象的结果：

$("button").click(function(){ 
      $("div").text($.param(personObj));
    });

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ personObj=new Object(); personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=50; personObj.eyecolor="blue"; $("button").click(function(){ $("div").text($.param(personObj)); }); }); </script>
    </head>
    <body>
    
    <button>序列化对象</button>
    <div></div>
    
    </body>
    </html>

## 定义和用法 ##

`param()` 方法创建数组或对象的序列化表示。

该序列化值可在进行 `AJAX` 请求时在 `URL` 查询字符串中使用。

### 语法 ###

jQuery.param(object,traditional)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>object</code></td> 
   <td>要进行序列化的数组或对象。</td> 
  </tr> 
  <tr> 
   <td><code>traditional</code></td> 
   <td>规定是否使用传统的方式浅层进行序列化（参数序列化）。</td> 
  </tr> 
 </tbody> 
</table>

### 详细说明 ###

`param()` 方法用于在内部将元素值转换为序列化的字符串表示。请参阅 `.serialize()` 了解更多信息。

对于 jQuery 1.3，如果传递的参数是一个函数，那么用 `.param()` 会得到这个函数的返回值，而不是把这个函数作为一个字符串来返回。

对于 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"}]

注意：因为有些框架在解析序列化数字的时候能力有限，所以当传递一些含有对象或嵌套数组的数组作为参数时，请务必小心！

在 jQuery 1.4 中，HTML5 的 `input` 元素也会被序列化。

## 更多实例 ##

我们可以如下显示对象的查询字符串表示以及 URI 编码版本：

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

`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

可以将 `traditional` 参数设置为 `true`，来模拟 jQuery 1.4 之前版本中 `$.param()` 的行为：

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

`recursiveEncoded` 和 `recursiveDecoded` 的值输出如下：

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