ajaxForm和ajaxSubmit的用法與區別

前幾天在學習form表單提交時看到這兩種方法，這兩種方法都是實現form的ajax提交的方法，看了不少資料仍是不太明白其用法和區別，最後直接本身寫demo，很快就理解，因此說實操是學習的最快捷直接的途徑。好了，下面回到正題：

在使用這兩種方法以前，首先須要安裝form.js的插件，下載就不放了，網上一搜就有；

<script src="/Tool/HtmlPage/S45/js/jquery-form.js"></script>

1、首先說用法，ajaxForm和ajaxSubmit均可以接收0或1個參數，該參數能夠是一個變量、一個對象或回調函數，這個對象主要有如下參數：

var object= {
                     url:url,　　　　　　//form提交數據的地址
　　　　　　  type:type,　　　  //form提交的方式(method:post/get)
　　　　　　  target:target,　　//服務器返回的響應數據顯示的元素(Id)號
                      beforeSerialize:function(){} //序列化提交數據以前的回調函數
　　　　　　  beforeSubmit:function(){},　　//提交前執行的回調函數
　　　　　　  success:function(){},　　　　   //提交成功後執行的回調函數
                      error:function(){},             //提交失敗執行的函數
　　　　　　  dataType:null,　　　　　　　//服務器返回數據類型
　　　　　　  clearForm:true,　　　　　　 //提交成功後是否清空表單中的字段值
　　　　　　  restForm:true,　　　　　　  //提交成功後是否重置表單中的字段值，即恢復到頁面加載時的狀態
　　　　　　  timeout:6000 　　　　　 　 //設置請求時間，超過該時間後，自動退出請求，單位(毫秒)。　　

}

html代碼：

<form action="" id="persondetail" method="post">
<div>姓名：<input name="text1" type="text" class="inputbox"></div>
<div>年齡：<input name="text2" type="text" class="inputbox"></div>
<div>愛好：<input name="text3" type="text" class="inputbox"></div>
<div><input id="submitbtn" type="submit" value="提交"></div>
</form>

JS代碼：

ajaxForm

$(function(){
     $("form").ajaxForm(object)；
    
        })

ajaxSubmit

        $(function(){
$('#submitbtn').click(function(){
     $("form").ajaxSubmit(object)；
})
           
        })

參數也能夠爲一個回調函數

$(function(){
$('#submitbtn').click(function(){
     $("form").ajaxSubmit(function(data){
                alert(data);
           })
})
           
        })

2、再說這兩種方法的區別

這兩種方法主要的卻別是ajaxForm不能主動提交form，函數只是爲提交表單作準備須要以submit來觸發提交。而ajaxSubmit會主動提交表單，同時能夠在點擊其餘按鈕時也能夠觸發提交，不必定是submit按鈕。

ajaxForm執行的時候其實至關於

 $("form").submit(function(){
            $(this).ajaxSubmit();

            return false;        //此句解釋了爲何ajaxSubmit會自動提交表單，想要阻止自動提交，必須return false；
        })

 

原文：http://www.cnblogs.com/xiaosama/p/4747848.html