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