JQuery Ajax操作常用的API: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'}
]

可以看到:serializeserializeArray都是针对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=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

可以看到:使用param将json转换成html参数时候,会对特殊字符编码。关于javascript编码,可以参考这篇文章

recursiveDecoded的返回结果可以看出:param对数组的序列化并不是我们想要的结果。可以使用正则表达式转换:

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

JQuery Ajax操作常用的API:serializeArray、serialize、param的区别和使用

上一篇:win32 socket阻塞与非阻塞函数及设置


下一篇:docker 安装 pikachu