当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery jQuery.param()用法及代码示例


用法 
jQuery.param( obj ) => String

说明：创建适合在 URL 查询字符串或 Ajax 请求中使用的数组、普通对象或 jQuery 对象的序列化表示。如果传递了一个 jQuery 对象，它应该包含具有名称/值属性的输入元素。

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

  • 添加的版本：1.4jQuery.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包含嵌套在另一个数组中的对象或数组的参数。

注意：因为没有针对参数字符串的通用agreed-upon 规范，所以不可能使用这种方法以在支持此类输入的所有语言中理想地工作的方式对复杂数据结构进行编码。改用 JSON 格式作为编码复杂数据的替代方案。

在 jQuery 1.4 中，HTML5 输入元素也被序列化了。

我们可以显示对象的查询字符串表示形式和 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 );

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[一]=1&a;[二]=2&a;[三]=3&b;[]=1&b;[]=2&b;[]=3

为了模拟 jQuery 1.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=%5B对象+对象%5D&b;=1&b;=2&b;=3
a=[对象+对象]&b;=1&b;=2&b;=3

例子：

序列化键/值对象。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.param demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/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"

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 jQuery.param()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。