Jquery Ajax - 表单元素序列化

通过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