通过Ajax请求向服务器发送数据时,通常以下方式给出要发送的数据,这些数据往往来自HTML表单。

- 字符串:name1=value1&name2=value2
 - 映射方式:{name:"value1",name2:"value2"}

 

这些数据往往来自HTML表单,使用以下3种方式可以对表单进行序列化,从而简化编程过程。

1.serialize()方法

将一组表单元素编码为用于Ajax请求的字符串。该方法将创建一个以标准URL编码方式表示的文本字符串并返回该字符串,可以在Ajax请求中将该字符串发送到服务器。

 

这个jQuery对象可以用来选择某个表单域元素(如<input> <textarea>和<select>),但通常用来选择要进行序列化的<form>本身。必须要对各个表单域设置name属性,否则不能生成查询字符串。

例子:提交表单时,通过消息框显示对表单元素编码所生成的查询字符串,然后取消表单提交操作

<form>
    用户名:<input type="text" name="username" /> <br/>
    电子邮箱:<input type="text" name="email" /><br/>
    <input type="submit"/>   
</form>

 

$("form").submit(function(){
    alert($(this).serializa());
    return false;
});

如果在文本框中输入了用户名"张三"和电子邮箱"a@163.com",则生成的查询字符串是 "username=xxx&email=yyyy"。

 

 

2.serializeArray()方法

创建一个JAVASCRIPT对象数组并返回该数组。这个数组将编码为一个JSON字符串,可以在Ajax请求中发送到服务器。

与.serialize()方法类似,当使用.serializeArray()对一个jQuery对象进行操作时,这个jQuery对象虽然也可以选择某个元素,但通常用它来选择要进行序列化的<form>本身

$("form").submit(function(){
  var content = "";
  var fields = $(this).serializeArray();
  $.each(fields, function(i,field){
       content += field.name + ":" + field.value + "\n";
   });
   alert("content");
   return false;
});

如果在文本框中输入了“黄蓉”和"hr@msn.com",则当执行serializeArray()时将会生成以下数据结构

[
  {name: "username",value:"黄蓉"}, {name:"email", value: "hr@msn.com"}
]

3.jQuery.param()方法

此方法是jQuery命名空间的一个全局方法,它创建一个数组 或 对象的序列化表示形式 并返回一个字符串,可以用在URL查询字符串或Ajax请求中。

jQuery().param(obj[, traditional])

        - obj表示要进行序列化的对象或数组;

        - tradition为boolean类型,表示是否要执行传统的“浅”(shallow)序列化。

$.param()是.serialize()的核心方法,它将表单元素数组或对象转化为序列化的字符串表示形式。 $.param()会以递归的方式对一个对象进行深度序列化,以满足现代脚本语言和框架,如php, ruby on rails等。若要全局禁用这个功能,可以设置jQuery.ajaxSettings.traditional = true. 在jQuery1.4中,HTML5的input元素也会被序列化。

       

下面的代码用于显示对象的查询字符串表示形式和URI解码版本。

var myObject = {a:{one:1, two: 2, three: 3}, b: [1,2,3]};
 var recursiveEncoded = $.param(myObject);
 var recursiveDecoded = decodeURIComponent($.param(myObject));
 $("<div/>").html(recursiveEncoded).appendTo($("body"));
 $("<div/>").html(recursiveDecoded).appendTo($("body"));
----------------------------------
变量recursiveDecoded值是
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3