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);
}