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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。