jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。
jQuery Form 有两个核心的方法--ajaxForm()和ajaxSubmit(),他们集合了从控制表单元素到决定如何管理提交进程的功能。
可接受参数: options对象,
var options = {
target: ' ID或class',
beforeSubmit: showRequest, //提交前回调函数
success: showResponse, //提交后回调函数
url: url, //默认为form表单的action
type: type, //默认是form表单的method
dataType: null, //服务端返回的数据类型(xml或json)
clearForm: true, //成功提交后,清除表单的值
resetForm: true, //成功提交后,重置表单的值
timeout: 1000 //设置请求时间的限制,单位是毫秒ms,大于则跳出请求
};
参数传递到ajaxForm() --> $('表单的ID').ajaxForm(options);
参数传递到ajaxSubmit() --> $('表单的ID').ajaxSubmit( function () {
$(this).ajaxSubmit(options);
return false;
} );
表单提交之前验证表单
大多数情况下,需要在表单提交之前对表单元素的值进行一次验证,如果不符合验证规则,就应该阻止表单的提交。
首先,定义一个validate函数,把它设置为beforeSubmit的值。
function validate (formData, jqForm, options) {
// TODO
var queryString = $.param( formData );
return true;
}
Form 插件获取表单数据的三种方式:
1. 利用参数 formData,遍历 formData 的value值, 为空时返回false阻止表单的提交。
2. 利用参数 jqForm, 先把jqForm 转为DOM对象 var form = jqForm[0];
然后通过form.name.value 来获取用户名的值。
3. 利用fieldValue() 方法, 例如: var username = $( 'input[ name = name ]' ).fieldValue();
使用jQuery Form插件能够容易地把一个传统的表单提交的方式改变为Ajax提交方式,这是最简便简单的方法。