輔助函式：jQuery.param()

詳細內容
分類：JQuery
發佈：2013-08-21, 週三 10:27
點擊數：2257

(PS:這篇文章是官網API文件的非專業翻譯+個人意見，並且重新排版過)

輔助函式:jQuery.param()

建立一個陣列或是物件的序列化表示，適合使用在URL查詢字串(URL query string )或是Ajax要求。

語法一：

 jQuery.param( obj )   //version added: 1.2
  • obj
    Type: Array or PlainObject
    要序列化的陣列或是物件。
  • 傳回值：字串。
語法二：
jQuery.param( obj, traditional )   //version added: 1.4
  • obj
    Type: Array or PlainObject
    要序列化的陣列或是物件
  • traditional
    Type: Boolean
    一個布林值，指出是否要執行傳統的淺層序列化。
  • 傳回值：字串。

這個函式是在內部使用來將表單元素值轉化成為序列化字串的表示。(參考.serialize() 以取得更多資訊)

從jQuery 1.3開始，一個函式的傳回值會取代當成字串的函式。

(As of jQuery 1.3, the return value of a function is used instead of the function as a String.)。

(維克：這句話很難懂，不過他的意思應該是，物件中 key: value，若是value是一個函式，從jQuery1.3版開始，他會呼叫該函式，然後把函式的傳回值序列化，而之前的版本並不會這樣。)

從jQuery 1.4版開始， $.param()方法會遞迴的序列化深層物件以符合現代的描述語言與框架，像是PHP和Ruby on Rails。你可以藉由設定jQuery.ajaxSettings.traditional = true; 來全面取消這個功能。

從jQuery 1.8開始，$.param()方法不再使用jQuery.ajaxSettings.traditional當成是預設值，並且會預設為false。為了最好的跨版本相容性，在呼叫$.param()時，要明確地給定第二個參數，而不要使用預設值。

如果傳遞的物件是一個陣列，那該陣列必須是物件陣列，並且符合 .serializeArray() 傳回的格式。

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

( 維克：序列化後的結果：first=Rick&last=Astley&job=Rock+Star )

注意：因為有些框架處理序列化陣列的能力有限，開發者在傳送陣列中巢狀地包含物件或是陣列的物件時，應該要小心謹慎。

注意：因為參數字串並沒有通用的協定規範。使用此方法編碼複雜的資料結構並且在所有支持該輸入的語言中正常運作是不可能的。使用JSON格式作為編碼複雜資料的替代。

在jQuery 1.4中，HTML5 輸入元素也會被序列化。

我們展示一個物件查詢字串的表示與一個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

要模仿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 lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.param demo</title>
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-1.9.1.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 小於1.3.2版
$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"
// >=1.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
 
 

  按個讚!~支持本站!~

FB推薦載入中