jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

Posted 2020-10-19 像艳遇一样忧伤c

转载自： http://blog.csdn.net/zqtsx/article/details/28655717

原始form表单值获取方式(手动)：

[javascript] view plain copy

 

1. $.ajax({  
2.    type: "POST",  
3.    url: "ajax.php",  
4.    data: "Name=摘取天上星&position=IT技术",  
5.    success: function(msg){alert(msg);},  
6.    error: function(error){alert(error);}  
7.  });  

JQ serialize()方法取值：

[javascript] view plain copy

 

1. $.ajax({  
2.    type: "POST",  
3.    url:"ajax.php",  
4.    data:$(‘#formID‘).serialize(),// 要提交的表单  
5.    success: function(msg) {alert(msg);},  
6.    error: function(error){alert(error);}  
7. });  

serialize()序列化表单实例：

[html] view plain copy

 

1. <script type="text/javascript" src="jquery-1.9.1.min.js"></script>  
2. <script type="text/javascript">  
3. $(function(){  
4.    $("#button").click(function(){  
5.      alert($("#formID").serialize());  
6.    });  
7. });  
8. </script>  
9. <form id="formID">  
10.     姓名 <input value="摘取天上星" name="Name" />  
11.     职位 <input value="IT技术" name="position" />  
12.         <input id="button" value="提交" type="button" />  
13. </form>  

 将form中的值转换为键值对：

 

[javascript] view plain copy

 

1. // 如：{Name:‘摘取天上星‘,position:‘IT技术‘}  
2. // ps:注意将同名的放在一个数组里  
3. function getFormJson(form) {  
4.     var o = {};  
5.     var a = $(form).serializeArray();  
6.     $.each(a, function () {  
7.         if (o[this.name] !== undefined) {  
8.             if (!o[this.name].push) {  
9.                 o[this.name] = [o[this.name]];  
10.             }  
11.             o[this.name].push(this.value || ‘‘);  
12.         } else {  
13.             o[this.name] = this.value || ‘‘;  
14.         }  
15.     });  
16.     return o;  
17. }  

键值对方式的AJAX调用：

[javascript] view plain copy

 

1. //调试调用   
2. $(function(){  
3.     $("#button").click(function(){  
4.         alert(getFormJson("#formID"));  
5.     });  
6. });  
7. //Ajax提交  
8. $.ajax({  
9.    type: "POST",  
10.    url:"ajax.php",  
11.    data:getFormJson($("#formID")),//表单数据JSON格式的函数参数里填写表单的ID或要提交的表单  
12.    dataType: ‘json‘,  
13.    success: function(msg) {alert(msg);},  
14.    error: function(error){alert(error);}  
15. });  

实例中通用的HTML表单：

[html] view plain copy

 

1. <form id="formID">  
2.     姓名 <input value="摘取天上星" name="Name" />  
3.     职位 <input value="IT技术" name="position" />  
4.         <input id="button" value="提交" type="button" />  
5. </form>