jQuery.param() 函數詳解

jQuery.param()函數用於將一個JS數組或純粹的對象序列化爲字符串值，以便用於URL查詢字符串或AJAX請求。

若是傳入的不是數組或"純粹的對象"，則返回空字符串("")；若是傳入的是null、undefined等沒法訪問屬性的值，則直接報錯。

所謂"純粹的對象"，就是經過{}或new Object()自行建立的對象。JS內置的Boolean、Number、String、Date、RegExp、Function、Window等類型的對象都不算是"純粹的對象"。

返回的字符串已通過URL編碼處理(採用的字符集爲UTF-8)。

該函數屬於全局的jQuery對象。

語法

jQuery 1.2 新增該靜態函數。

jQuery.param( obj [, traditional ] )

參數

參數	描述
obj	String類型須要被序列化的JS對象。
traditional	Boolean類型指示是否執行一個傳統的"淺層"序列化

請注意參數traditional的值，若是爲false，它將遞歸處理包含嵌套內容的深層對象；若是爲true，則對屬性值或元素直接淺層處理，不進行遞歸處理。

從jQuery 1.8開始，jQuery.param()默認值爲false。爲了最好的跨版本兼容性，請在調用該函數時，明確指定第二個參數，而不要使用默認值。

若是參數obj是一個數組，那麼它的每一個元素都必須是一個包含name屬性和value屬性的對象(value屬性能夠沒有，默認其值爲undefined)。

// 每一個元素必須是包含name和value屬性的對象(也能夠有其餘屬性，但不會被處理)
// jQuery會將name屬性值用做參數名，value屬性值用作參數值。
[
 { name: "name", value: "CodePlayer" },
 { name: "age", value: 18 },
 { name: "job", value: "Developer", company: "家裏蹲" }
]

// 字符串將被看做一個字符數組
var v10 = $.param( "name" ); // "0=n&1=a&2=m&3=e"

$.param是將對象參數化，使用特別靈活，直接上代碼吧：

jquery版本爲最新版:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

1.直接傳遞一個obj，直接轉化成key=value而後用&鏈接起來

$.param({name:'bill',age:18}); 

結果：name=bill&age=18
這裏的{X:Y,A:B}會變成X=Y&A=B的格式

2.name value鍵值對組成的數組，這個好說，name=value而後用&拼起來

$.param([
  {name:'name',value:'bill'},
  {name:'age',value:18}
]);

結果：name=bill&age=18
這裏的name:'name'兩個name是不一樣的，name value是固定格式
這裏的{name:XXX,value:YYY} 會變成XXX=YYY的格式,比起上面的寫法，顯得更囉嗦

3.當name出現相同的時候

$.param([
  {name:'name',value:'bill'},
  {name:'name',value:'tom'}
]); 

結果：name=bill&name=tom
這樣的話，有些後端語言是取不到兩個name的

4.若是傳遞的對象中的一個屬性爲數組

$.param([
  {
     name:'name',
     value:['bill','tom']
  }
]); 

結果：name=bill%2Ctom

返回的字符串已通過URL編碼，原始字符串爲:

ame=bill,tom

可是","號被URL轉義爲"%2C"

這裏使用$.param(data)和$.param(data,true)是同樣的,都會把","號轉義

5.

$.param({
  name:['bill','tom'],
  age:[18,19],
  sex:["male","female"]
});

結果：

name%5B%5D=bill&name%5B%5D=tom&age%5B%5D=18&age%5B%5D=19&sex%5B%5D=male&sex%5B%5D=female

返回的字符串已通過URL編碼，原始字符串爲:

name[]=bill&name[]=tom&age[]=18&age[]=19&sex[]=male&sex[]=female

name,age,sex被自動加上中括號了，其中"["轉義爲:"%5B " ,"]"轉義爲"%5D"
若是使用$.param(data,true),這裏的結果將會是:

name=bill&name=tom&age=18&age=19&sex=male&sex=female

這個結果恰好是java後臺接受須要的格式

6.

$.param([
  {name:'name',value:['bill','tom']},
  {name:"age",value:[18,19]},
  {name:"sex",value:["male","female"]}
])

結果：name=bill%2Ctom&age=18%2C19&sex=male%2Cfemale

返回的字符串已通過URL編碼，原始字符串爲:

name=bill,tom&age=18,19&sex=male,female,

其中","號又被轉義了

7.

var array = [
        { name: "name", value: "張三" },
        { name: "age", value: 18, extra: "忽略該屬性" },
        { name: "grade" }, // 沒有value屬性，則value值爲undefined，將被轉爲空字符串""
        { name: "orderId", value: 2 },
        { name: "orderId", value: 3 },
];
var v12 = $.param( array );

返回UTF-8編碼,結果爲: name=%E5%BC%A0%E4%B8%89&age=18&grade=&orderId=2&orderId=3

8.

// jQuery將數組的每一個元素視做對象，並調用其name和value屬性
// 因爲這些元素沒有name屬性，因此爲undefined，並被轉爲字符串"undefined"
// 因爲這些元素沒有value屬性，因此爲undefined，並被轉爲空字符串""

var v13 = $.param( [ "name", 2, 3 ] );

結果爲:undefined=&undefined=&undefined=

9.

var v14 = $.param({ 
    name:"Jim",
    age: function(){ return 18; }
});

// 1.3以前返回："name=Jim&age=function+()%7B+return+18%3B+%7D"
// 1.3+返回："name=Jim&age=18"

10:深層序列化

// 返回的字符串已通過URL編碼，原始字符串爲："name=CodePlayer&age=18&uid[]=2&uid[]=3&uid[]=5"
var obj1 = {
	name:'CodePlayer',
	age:18,
	uid:[2,3,5]
};
var complexV = $.param(obj1 , false ); //"name=CodePlayer&age=18&uid%5B%5D=2&uid%5B%5D=3&uid%5B%5D=5"

// 傳統的淺層序列化
var simpleV = $.param(obj1 , true ); 
// "name=CodePlayer&age=18&uid=2&uid=3&uid=5"

var obj2 = {
    name: "Jim",
    options: {age: 18, global: true, uid: [1, 2, 3]  }
};
// 原始字符串爲：
"name=Jim&options[age]=18&options[global]=true&options[uid][]=1&options[uid][]=2&options[uid][]=3"
complexV = $.param(obj2, false ); 
//"name=Jim&options%5Bage%5D=18&options%5Bglobal%5D=true&options%5Buid%5D%5B%5D=1&options%5Buid%5D%5B%5D=2&options%5Buid%5D%5B%5D=3"

// 原始字符串爲："name=Jim&options=[object Object]"
simpleV = $.param(obj2, true ); 
// "name=Jim&options=%5Bobject+Object%5D"


var obj3 = [
     { name: "names", value: { first:"Jim", second:"W", last:"Green" } },
     { name: "uid", value: [ { name: "a", value: 1}, "James" ] }
];
/* 數組始終不會遞歸處理(即$.param若是傳遞的參數爲數組,就只會拼接name=vlaue,而不會遞歸處理vlaue值)*/

// 原始字符串爲："names=[object Object]&uid=[object Object],James"
complexV = $.param(obj3, false ); // "names=%5Bobject+Object%5D&uid=%5Bobject+Object%5D%2CJames"

// 原始字符串爲："names=[object Object]&uid=[object Object],James"
simpleV = $.param(obj3, true ); // "names=%5Bobject+Object%5D&uid=%5Bobject+Object%5D%2CJames"

總結:對於傳遞的參數爲一個數組,使用$.param(data),$.param(data,true)沒有區別;若是傳遞的是一個對象,對象的某個屬性爲數組,那麼使用$.param(data,true)能夠轉化爲java後臺接受須要的格式,$.param(data)則會有問題