當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。