简介
jquery form插件能用来控制表单数据和表单提交,有个它后,不需要依次获取所有域值,可以直接获取表单的所有域值。它主要有ajaxForm、ajaxSubmit两个方法,ajaxForm不提交表单,只准备表单,点击提交按钮时才会提交;ajaxSubmit立刻提交表单。如果表单中有文件,也会被提交,如果浏览器支持XMLHttpRequest Level2,则是ajax提交,否则利用iframe提交。
对比
没有jquery form插件前,要依次获取所有输入域的值
var value1 = $("#input1").val();
//校验value1
var value2 =$("#input2").val();
//校验value2
使用jquery form插件
// 获取表单的所有键值对
$("#form").formSerialize(); //返回name1=v1&name2=v2的字符串
注意,jquery core也提供了form序列化的方法
$("form").serialize()
ajaxForm与ajaxSubmit
ajaxForm用法
ajaxForm不会提交表单,只准备数据,在点击提交按钮时,在提交。它接受单个参数,回调函数或者options对象。
$(function(){
var options={
beforeSubmit:function(){
}
};
//点击提交按钮时,才提交
$("form").ajaxForm(options);
});
ajaxSubmit用法
ajaxSubmit立刻提交表单,接受单个参数,回调函数或者options对象。
$(function(){
$("form").submit(function(){
//执行到这一行时,立刻提交
$("form").ajaxSubmit();
});
});
比较以上两种写法,还是ajaxForm比较简练一些。
beforeSubmit
通常我们会在提交前做些校验,那就用到beforeSubmit函数
var options={
beforeSubmit:function(formData, jqForm, options){
//formData是一个数组,包含表单的全部键值对,格式为 [{"name":"field1","value":"val1"}]
//返回true则取消表单提交
}
};
$(function(){
$("form").ajaxForm(options);
});
总结
好了,jquery form插件最重要的两个方法介绍完了,其它还有formSerialize、fieldSerialize、fieldValue等,都可以查看API 文档