JQuery Ajax操作常用的API：serializeArray、serialize、param的區別和使用

標籤：serializearray   serialize   param   

使用JQuery進行ajax編碼的時候，經常會使用到這3個API，本文學習下這3個API的使用方式。如下的HTML片段，如果我們將holder表單下的控制項值提交到伺服器。就需要用到serialize或者serializeArray了。

<form id="holder">  <input type="text" name="a" value="1"/>  <div><input type="text" name="b" value="2" id="b" />  </div>  <input type="hidden" name="c" value="3" id="c" />  <div>    <input type="checkbox" name="f" value="8" checked="true"/>    <input type="checkbox" name="f" value="9" checked="true"/>  </div></form>

$("#holder").serialize()   輸出結果是 a=1&b=2&c=3&f=8&f=9

$("#holder").serializeArray() 輸出結果如下：

[   {name: 'a', value: '1'},   {name: 'b', value: '2'},  {name: 'c', value: '3'},  {name: 'f', value: '8'},  {name: 'f', value: '9'}]

可以看到：serialize和serializeArray都是針對JQuery對象(選中的FORM元素)進行操作，只是返回值格式不同而已。

這裡特別要注意：這2個API只能操作form，如果將holder改成div，會發現不起作用。

 

var obj = {"a":{one: 1,two: 2,three: 3}, "b": [1,2,3]};var recursiveEncoded = $.param(obj);var recursiveDecoded = decodeURIComponent($.param(obj));alert(recursiveEncoded);alert(recursiveDecoded);

輸出結果是：

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

可以看到：使用param將json轉換成html參數時候，會對特殊字元編碼。關於javascript編碼，可以參考這篇文章。

recursiveDecoded的返回結果可以看出：param對數組的序列化並不是我們想要的結果。可以使用Regex轉換：

recursiveDecoded.replace(/\[\]/g,"")

JQuery Ajax操作常用的API：serializeArray、serialize、param的區別和使用