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