jQuery 序列化表单数据 serialize() serializeArray()

1、serialize()方法

描述：序列化表单内容为字符串,用于Ajax请求。

格式：var data = $("form").serialize();

2.serializeArray()方法

描述：序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。

           注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者<a>第三方库</a>进行字符串化操作。

格式：var jsonData = $("form").serializeArray();

在使用ajax提交表单数据时,以上两种方法都可以将data参数设置为$("form").serialize()或$("form").serializeArray()。

Demo

[html]  view plain copy

1. <form id="myform">  
2.     <table>  
3.         <tr>  
4.             <td>姓名:</td>  
5.             <td> <input type="text" name="name" /> </td>  
6.         </tr>  
7.         <tr>  
8.             <td>性别:</td>  
9.             <td>  
10.                 <input type="radio" name="sex" value="1"> 男  
11.                 <input type="radio" name="sex" value="0"> 女  
12.             </td>  
13.         </tr>  
14.         <tr>  
15.             <td>年龄:</td>  
16.             <td>  
17.                 <select name="age">  
18.                     <option value="20">20</option>  
19.                     <option value="21">21</option>  
20.                     <option value="22">22</option>  
21.                 </select>  
22.             </td>  
23.         </tr>  
24.         <tr>  
25.             <td colspan="2">  
26.                 <input type="button" id="ajaxBtn" value="提交" />  
27.             </td>  
28.         </tr>  
29.     </table>  
30. </form>  

[javascript]  view plain copy

1. $(function() {  
2.    $("#ajaxBtn").click(function() {  
3.     var params1 = $("#myform").serialize();  
4.     var params2 = $("#myform").serializeArray();  
5.     console.log(params1);  //name=zhangsan&sex=1&age=20  
6.     console.log(params2);  //[Object, Object, Object]  
7.     $.ajax( {  
8.         type : "POST",  
9.         url : "RegisterAction.action",  
10.         data : params1,  
11.         success : function(msg) {  
12.             alert("success: " + msg);  
13.         }  
14.     });  
15.    })  
16. })  

从下图中可以看出两种方法的不同