jquery form 的beforeSubmit提交前的回调函数
生活随笔
收集整理的這篇文章主要介紹了
jquery form 的beforeSubmit提交前的回调函数
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
ajaxForm()和ajaxSubmit()方法可以接受0個或1個參數(shù)，當(dāng)為單個參數(shù)時，該參數(shù)可以是一個回調(diào)函數(shù)，也可以是一個options對象。以下是一個options對象.
var options={
target:'#output1', //把服務(wù)器返回內(nèi)容放入id為output1的元素中
beforeSubmit:showRequest, //提交前的回調(diào)函數(shù)
success:showResponse, //提交后的回調(diào)函數(shù)
//url:url, //默認(rèn)是form的action,如果申明，則會覆蓋
//type:type, //默認(rèn)是form的method('get' or 'post'),如果申明，則會覆蓋
//dateType:null, //'xml','script',or 'json'(接受服務(wù)端返回的類型)
//clearForm:true, //成功提交后，清除所有表單元素的值
//resetForm:true, //成功提交后，重置所有表單的值
//timeout:3000 //限制請求的時間，當(dāng)請求大于3秒后，跳出請求
}定義上面options后，就可以把此對象傳遞給ajaxForm()方法,
$("#myForm").ajaxForm(options);
或是
$("#myForm").submit(function(){$(this).ajaxSubmit(options);return false;
});在以上options中指定了兩個回調(diào)函數(shù),即beforeSubmit:showRequest和success:showResponse
各函數(shù)參數(shù)如下:
funtion showRequest(formData,jqForm,options){var queryString = $.param(formData);return true;
}
此回調(diào)函數(shù)有三個參數(shù).
第1個參數(shù)formdata是數(shù)組對象[{name:myname},{value:myvalue}],在這里，使用$.param()方法把它轉(zhuǎn)化為字符串,得到類似"name=1&address=2",需要注意的是當(dāng)表單提交時,form插件會以Ajax的方式自動提交這些數(shù)據(jù).
第2個參數(shù)jqForm是一個jQuery對象，它封裝了表單的元素，如果需要訪問jqForm的dom元素，可以把jqForm轉(zhuǎn)換為DOM對象。
var formElement = jqForm[0];
var address = formElement.address.value;
第3個參數(shù)options就是options對象，前面已經(jīng)聲明了options對象里的一些屬性，其它沒有聲明的，則會使用默認(rèn)的屬性。
在這個回調(diào)函數(shù)中，只要不返回false,表單都將被允許提交，如果返回false,則會阻止表單提交，可以利用這個特性，在表單提交前驗(yàn)證數(shù)據(jù)，如果不符合驗(yàn)證規(guī)則，則阻止表單提交。
以下講三種表單驗(yàn)證方式:a,利用參數(shù)formData,formData是一個數(shù)組對象，數(shù)據(jù)格式如下:[{name:name,value:nameValue},{name:password,value:passwordValue}]
由于是數(shù)組，可循環(huán)來獲取每個元素的值，然后判斷元素的值是否符合驗(yàn)證規(guī)則(這里只判斷元素是否為空),如果有一項(xiàng)不符合驗(yàn)證規(guī)則，就返回false,來阻止表單提交,代碼如下:
function validate(formData,jqForm,options){
for(var i =0;i<formData.length;i++){
if(!formData[i].value){
alert('用戶名,地址和自我介紹都不能為空!');
return false;
}
}
var queryString = $.param(formData);
return true;
}b,利用jqForm，不僅可以利用第一個參數(shù)formData來獲取表單數(shù)據(jù)，而且可以用第二個參數(shù)jqForm來達(dá)到同樣的效果.
參數(shù)jqForm是一個jQuery對象，它封裝了表單的元素，如果需要訪問jqForm的DOM元素，可以把jqForm轉(zhuǎn)為DOM對象。
var form = jqForm[0];
然后通過form.name.value來獲取用戶名的值；通過form.address.value來獲取地址的值.
代碼如下:
function validate(formData,jqForm,options){
var form = jqForm[0];
if(!form.name.value || !form.address.value){
alert('用戶名和地址不能為空，自我介紹可以為空!');
return false;
}
var queryString = $.param(formData);
return true;
}c:利用fieldValue()方法
fieldValue()方法會把匹配元素的值插入到數(shù)組中，然后返回這個數(shù)組，如果表單元素的值被判定無效，則數(shù)組為空，否則數(shù)組將包含一個或多個元素的值，由于返回的是一個數(shù)據(jù)，而不是jQuery對象，因此不能進(jìn)行鏈?zhǔn)讲僮鳌?利用fieldValue()方法，也能很容易地獲取到表單元素的值，例如可以通過$("input[name=address]").fieldValue()來獲取name為address的input元素的值的“數(shù)組集合”。然后通過數(shù)組下標(biāo)來獲取數(shù)組中對應(yīng)的值。
代碼如下:
function validate(formData,jqForm,options){
var usernameValue = $('input[name=name]').fieldValue();
var addressValue = $('input[name=address]').fieldValue();
if(!usernameValue[0] || !addressValue[0]){
alert('用戶名和地址不能為空,自我介紹可以為空!');
return false;
}
var queryString = $.param(formData);
return true;
}sussess……提交后的回調(diào)函數(shù):
function showResponse(responseText,statusText){alert('狀態(tài):'+statusText+'\n 返回的內(nèi)容是:\n'+responseText);
}
statusText只是一個返回狀態(tài)，如:success,error等.
responseText攜帶著服務(wù)器返回的數(shù)據(jù)內(nèi)容，responseText會根據(jù)設(shè)置的options對象中的dateType屬性來返回相應(yīng)格式的內(nèi)容.具體情況如下。
1，對于缺省的html返回，回調(diào)函數(shù)的第一個參數(shù)是XMLHttpRequest對象的responseText屬性；
2，當(dāng)dataType屬性被設(shè)置為xml時，回調(diào)函數(shù)的第一個參數(shù)是XMLHttpRequest對象的responseXML屬性;
例如聲明服務(wù)器返回數(shù)據(jù)的類型為xml,然后以XML方式解析數(shù)據(jù)，代碼如下:
$("#xmlForm").ajaxForm({
dataType:'xml',
success:processXml
});function processXml(responseXML){var name = $('name',responseXML).text();var address = $('address',responseXML).text();$("#xmlOut").html(name+" "+address);
}3，當(dāng)dataType屬性被設(shè)置為json時，回調(diào)函數(shù)的第1個參數(shù)是從服務(wù)器返回的json數(shù)據(jù)對象，如:
$('myForm').ajaxForm({
dataType:'json',
success:processJson
});
function processJson(data){$('#jsonOut').html(data.name+' ' + data.address);
}
?
轉(zhuǎn)載于:https://www.cnblogs.com/fpc-syq/p/9049910.html
總結(jié)
以上是生活随笔為你收集整理的jquery form 的beforeSubmit提交前的回调函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux常用命令——useradd，u
- 下一篇： java——-反省机制（代码例子）-