zoukankan      html  css  js  c++  java
  • 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>  
  • 相关阅读:
    int 和 Integer 有什么区别?
    内部类可以引用它的外部类的成员吗?有没有什么限制?
    为什么Java不支持运算符重载?
    生命周期内create和mounted的区别?
    JSP有哪些动作?分别是什么?
    vue解除双向绑定?
    实现一个函数功能:sum(1,2,3,4..n)转化为 sum(1)(2)(3)(4)…(n)?
    新旧生命周期?
    vue异步组件?
    XML文档约束有哪几种?有什么区别?
  • 原文地址:https://www.cnblogs.com/Thinkingcao/p/8183455.html
Copyright © 2011-2022 走看看