程式狂想筆記

一個攻城師奮鬥史

0%

jQuery $.param傳參數小筆記

之前我很常在大學自學 jQuery 很常用$('xxx').serialize()做表單傳送動作
不過今天上班同事剛好問 form
就看到這個$.param(xxxx,true)
好奇這個跟serialize哪裡不一樣
這篇當然要好好補足一下
PHP 使用上可能需要用到$.param

網路查了一下
常看到這三個 method 做比較$.serialize$.serializeArray$.param

\$(“form”).serialize()

基於$.param實作
寫\$.ajax 很常用到這個
其實這個跟$.param沒有什麼重要關係

\$(“form”).serializeArray

產生一個 JavaScript 陣列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
{
"name": "fieldName",
"value": "value"
},
{
"name": "name",
"value": "man"
},
{
"name": "sex",
"value": "male"
},
{
"name": "class[]",
"value": "math"
},
{
"name": "class[]",
"value": "chinese"
}
]

一直覺得這個 method 有什麼軟用,不過我來一直重覆看文件
官網有提到

If the object passed is in an Array, it must be an array of objects in the format returned by .serializeArray()
[

{ name: “first”, value: “Rick” },
{ name: “last”, value: “Astley” },
{ name: “job”, value: “Rock Star” }
]

原來這玩意可以用在這裡(\$.param)

\$.param

竟然$().serialize()可以做到我們想要做的事情
前面有提到$.param()就是實作出$().serialize()

但我對他第二個參數,比較有興趣
在開方者工作測試

\$.param 除了可以吃$.serializeArray傳回的陣列以外
他還能實接對物件做解析

比較需要注意的事情是

1
2
3
4
5
6
7
8
9
10
11
12
13
var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1, 2, 3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded); // a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
alert(recursiveDecoded); // a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

php 程式需要做 form 表單送出的時候,需要用a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
但這時候 myObject 屬性塞陣列/物件,jQuery 預設會轉
\$.param 接收物件的時候,第二個參數就有差了
遇設是 false,所以寫 php 都不用調整這個參數
但是 jsp 的就需要了

默認的話,traditional 為 false,即 jquery 會深度序列化參數對象,以適應如 PHP 和 Ruby on Rails 框架
jQuery ajax 的 traditional 參數的作用 - i33 的個人空間 - 開源中國

1
$.param(myObject, false)

顯示結果為 a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

1
$.param(myObject, true)

顯示結果為a=[object+Object]&b=1&b=2&b=3

所以不管怎麼用,checkbox name 還是一定要加[]

寫 PHP checkbox 記得一件事

我覺得我還是一定會忘記 XDD
再寫一次

寫 checkbox 相同 name 的時候,記得在 PHP 變數加個[]
ex:

1
2
3
4
<input name="xxxx[]" type="checkbox" />
<input name="xxxx[]" type="checkbox" />
<input name="xxxx[]" type="checkbox" />
<input name="xxxx[]" type="checkbox" />

jQuery.ajaxSettings.traditional = true;

預設做 ajax 動作實候,呼叫$.param(xxx,true)會自動帶後面的 true
但自己寫$.param,還是需要手動加(xxx,true)

參考來源:
jQuery.param() | jQuery API Documentation
jquery serialize()、serializearray()已经\$.param 方法 - youxin - 博客园