• 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>  
  • 相关阅读:
    hexo 建站参考
    如何在element-UI 组件的change事件中传递自定义参数
    vue 项目中当访问路由不存在的时候默认访问404页面
    百度地图引用时 报出A Parser-blocking, cross site (i.e. different eTLD+1) script
    echarts之legend-改变图例的图标为自定义图片
    大数据浪潮下的前端工程师
    为什么要使用TypeScript开发Web应用程序
    【转】简单理解Vue中的nextTick
    vue项目如何刷新当前页面
    安装Genymotion android模拟器
  • 原文地址:https://www.cnblogs.com/Thinkingcao/p/8183455.html
Copyright © 2020-2023  润新知