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

转载自: 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>  
posted @ 2018-01-03 13:58  像艳遇一样忧伤c  阅读(402)  评论(0编辑  收藏  举报