JQuery.form表单提交参数详解

 

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