详解javascript表单的Ajax提交插件的使用
Ajax提交插件
form.js表单的下载地址：官方网站：http://malsup.com/jquery/form/
form.js插件有两个核心方法：ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进行的功能。
//ajaxForm提交方式
$('#reg').ajaxForm(function(){
alert('提交成功！');
});
使用ajaxForm()方法，会直接实现ajax提交。自动阻止了默认行为，而它提交的
默认页面是form控件的action属性的值。提交的方式是method属性的值。
//ajaxSubmit()提交方式
$('#reg').submit(function(){
$(this).ajaxSubmit(function(){
alert('提交成功！');
});
returnfalse;
});
注意：ajaxForm()方法，是针对form直接提交的，所以阻止了默认行为。而ajaxSubmit()方法，由于是针对submit()方法的，所以需要手动阻止默认行为。
option参数
option参数是一个以键值对传递的对象，可以通过这个对象，设置各种Ajax提交的功能。
$('#reg').submit(function(){
$(this).ajaxSubmit({
url:'test.php',//设置提交的url，可覆盖action属性
target:'#box',//服务器返回的内容存放在#box里
type:'POST',//GET,POST
dataType:null,//xml,json,script，默认为null
clearForm:true,//成功提交后，清空表单
resetForm:true,//成功提交后，重置表单
data:{//增加额外的数据提交
aaa:'bbb',
ccc:'ddd'.
},
beforeSubmit:function(formData,jqForm,options){
alert(formData[0].name);//得到传递表单元素的name
alert(formData[0].value);//得到传递表单元素的value
alert(jqForm);//得到form的jquery对象
alert(options);//得到目前options设置的属性
alert('正在提交中！！！');
returntrue;
},
success:function(responseText,statusText){
alert(responseText+statusText);//成功后回调
},
error:function(event,errorText,errorType){//错误时调用
alert(errorText+errorType);
},
});
returnfalse;
});
工具方法
//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg#user').fieldSerialize());
//得到某个字段的value值
alert($('#reg#user').fieldValue());
//重置表单
$('#reg').resetForm()
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！