jquery-form外掛的ajaxForm和ajaxSubmit的用法與區別
在使用這兩種方法之前,首先需要安裝form.js的外掛,下載就不放了,網上一搜就有;
<script src="/Tool/HtmlPage/S45/js/jquery-form.js"></script>
一、首先說用法,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程式碼
JS程式碼:<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>
ajaxForm
$(function(){
$("form").ajaxForm(object);
})
ajaxSubmit
$(function(){
$('#submitbtn').click(function(){
$("form").ajaxSubmit(object);
})
})
引數也可以為一個回撥函式
二、再說這兩種方法的區別$(function(){ $('#submitbtn').click(function(){ $("form").ajaxSubmit(function(data){ alert(data); }) }) })
這兩種方法主要的卻別是ajaxForm不能主動提交form,函式只是為提交表單做準備需要以submit來觸發提交。而ajaxSubmit會主動提交表單,同時可以在點選其他按鈕時也可以觸發提交,不一定是submit按鈕。
ajaxForm執行的時候其實相當於
$("form").submit(function(){
$(this).ajaxSubmit();
return false; //此句解釋了為什麼ajaxSubmit會自動提交表單,想要阻止自動提交,必須return false;
})