JQuery.form.js异步提交表单

异步提交表单的问题：

异步提交表单时，如果点击了type=submit的Button或input后，form是会二次提交的，第一次是异步提交的，第二次表单自身仍会提交，这就造成了异步提交操作异常。

想要解决二次提交问题，那就要把Button和input的type换成button，给他添加click事件，然后异步提交到服务器，由于没有触发表单的submit事件所以解决了表单的二次提交问题， 但是这会产生另一个问题——由于没有触发submit事件，所以表单验证不会触发，这就需要我们手动进行表单验证，否则数据不经验证就提交到服务器会产生异常。

异步提交表单最好的方式是使用JQuery.form.js插件，它会替换掉默认的submit事件，当点击submit按钮后表单会触发验证，但是不会二次提交。

$().ajaxForm()和 $().ajaxSubmit()的区别：

1. ajaxForm使用的时候必须要有submit按钮；而ajaxSubmit则可以是任何元素的click事件。
2. 要想触发表单的验证事件则必须要触发submit事件，使用ajaxSubmit是不会触发表单的验证事件的，所以最好使用ajaxForm。
3. 但是必须清楚ajaxForm依赖于表单的[type=submit]，如果没有触发submit事件，ajaxForm是没有任何效果的。
4. 异步提交时，如果不想点击submit按钮，但是又为了实现表单的验证，那么可以使用一个div将submit按钮包裹起来，然后设置div的display为none，之后在submit按钮的click事件中定义异步提交的方法，之后在想异步提交的时候调用submit按钮的click()方法。这样表单会触发验证，同时ajaxForm会阻止表单的自动提交，转而进行异步提交。如此一来，表单验证和异步提交的问题就完美解决了。

$().resetForm() : 重置表单

$().clearForm() : 清空表单

JQuery.form.js

//异步提交参数信息

var options={

target : '#output', // 把服务器返回的内容放入id为output的元素中

beforeSubmit : showRequest, // 提交前的回调函数

success : showResponse, // 提交后的回调函数

// url : url, //默认是form的action，如果申明，则会覆盖

// type : type, // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖

// dataType : null, // html（默认）、xml、script、json接受服务器端返回的类型

// clearForm : true, // 成功提交后，清除所有表单元素的值

// resetForm : true, // 成功提交后，重置所有表单元素的值

timeout : 3000 // 限制请求的时间，当请求大于3秒后，跳出请求

}

function showRequest(formData, jqForm, options){

// formData: 数组对象，提交表单时，form插件会以ajax方式自动提交这些数据，格式如[{name:user,value:val},{name:pwd,value:pwd}]

// jqForm: jQuery对象，封装了表单的元素

// options: options对象

var queryString=$.param(formData); // name=1&address=2

var formElement=jqForm[0]; // 将jqForm转换为DOM对象

var address=formElement.address.value; // 访问jqForm的DOM元素

return true; // 只要不返回false，表单都会提交，在这里可以对表单元素进行验证

}

function showResponse(responseText,statusText){

// dataType=xml

var name=$("name",responseXML).text();

var address=$("address",responseXML).text();

$("#xmlout").html(name+" "+address);

// dataType=json

$("#jsonout").html(data.name+" "+data.address);

}

示例：

  <form id="form1" name="form1">

     <input id= "userName" name= "userName" value= "姓名" />

     <input id= "age" name= "age" value= "30" />

     <input type= "submit" value= "submit" />

   </form>

   <input id= "myButton" type= "button" value= "提交" />

  

   <script type= "text/javascript" >

 

     var myData = {

       "CnName" : "GQL" ,

       "EnName" : "Coker"

     };

     $( function () {

       var ajaxFormOption = {

         type: "post" , //提交方式

         dataType: "json" , //数据类型

         data: myData, //自定义数据参数，视情况添加

         url: "TestHandler.ashx?type=ajaxForm" , //请求url

         success: function (data) { //提交成功的回调函数

           document.write( "success" );

         }

       };

 

       //form中有submit按钮——方式1

       $( "#form1" ).ajaxForm(ajaxFormOption);

 

       //form中有submit按钮——方式2

       $( "#form1" ).submit( function () {

         $( this ).ajaxSubmit(ajaxFormOption);

         return false ;

       });

 

       //不需要submit按钮，可以是任何元素的click事件

       $( "#myButton" ).click( function () {

         $( "#form1" ).ajaxSubmit(ajaxFormOption);

         return false ;

       });

 

     });

   </script>

示例2：

//需要提交的表单

< form id ="AddRiskForm" class ="layui-form layui-form-pane">            

    < div class ="layui-form-item">

        < label class ="layui-form-label"> 风险等级 </ label >

        < div class ="layui-input-block">

            < input type ="number" name ="Level" lay-verify ="required|number" autocomplete ="off" class ="layui-input">

        </ div >

    </ div >

    < div class ="layui-form-item">

        < label class ="layui-form-label"> 风险描述 </ label >

        < div class ="layui-input-block">

            < input type ="text" name ="Description" lay-verify ="required" autocomplete ="off" class ="layui-input">

        </ div >

    </ div >

    < div class ="layui-form-item">

        < label class ="layui-form-label"> 颜色码 </ label >

        < div class ="layui-input-block">

            < input type ="color" name ="Color" lay-verify ="required" autocomplete ="off" class ="layui-input">

        </ div >

    </ div >

    < div class ="layui-form-item" style =" display :none">

        < label class ="layui-form-label"> 提交 </ label >

        < div class ="layui-input-block">

            < button class ="layui-btn layui-btn-primary" lay-submit id ="sub_riskadd"></ button >

        </ div >

    </ div >

</form>

//表单submit按钮点击事件

$( "#sub_riskadd" ).click( function () {

    var options = {

        url: "../Handlers/AddRiskSettingHandler.ashx" ,

        type: 'post' ,

        success: function (_res) {

            if (_res == 'ok' ) {

                layer.closeAll();

                layer.msg("添加成功");

                $("#AddRiskForm").resetForm();

            } else {

                layer.msg("操作失败,请检查输入的参数信息");

            }

            riskSettingTableIns.reload();

        }

    };

    $("#AddRiskForm").ajaxForm(options);              

});

//在需要异步提交的时候，调用submit按钮的click()事件

function OpenRiskAdd() {

    layer.open({

        type: 1,

        title: '添加Risk设置' ,

        area: [ '400px' , '500px' ],

        content: $('#addRisk'),

        btn: [ '确定' , '取消' ],

        yes: function () {

            $("#sub_riskadd").click();                     

        },

        btn2: function () {

            layer.close();

        }

    });

}