本文详细介绍jQuery Form插件的核心方法ajaxForm和ajaxSubmit，解析两者在阻止默认提交行为上的区别。通过具体代码示例展示如何配置option参数实现自定义URL、目标元素及数据提交，并涵盖表单序列化、字段取值等工具方法的使用，帮助开发者高效实现无刷新表单提交。
jQuery Form插件概述与下载
Ajax 提交插件
form.js 表单插件的官方下载地址为：http://malsup.com/jquery/form/。
核心方法：ajaxForm与ajaxSubmit的区别
form.js 插件主要包含两个核心方法：ajaxForm() 和 ajaxSubmit()。这两个方法整合了对表单元素的控制以及提交方式的管理功能。
//ajaxForm 提交方式
$('#reg').ajaxForm(function () {
alert('提交成功！');
});使用 ajaxForm() 方法可以直接实现 Ajax 提交。该方法会自动阻止表单的默认提交行为，并提交至
form 控件中 action 属性指定的默认页面。提交方式则采用 method 属性的值。
//ajaxSubmit()提交方式
$('#reg').submit(function () {
$(this).ajaxSubmit(function () {
alert('提交成功！');
});
return false;
});需要注意的是，ajaxForm() 方法直接作用于 form 元素，因此会自动阻止默认行为；而 ajaxSubmit() 方法针对的是 submit() 事件，需要手动阻止默认行为。
配置option参数实现自定义提交
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('正在提交中！！！');
return true;
},
success : function (responseText, statusText) {
alert(responseText + statusText); //成功后回调
},
error : function (event, errorText, errorType) { //错误时调用
alert(errorText + errorType);
},
});
return false;
});表单序列化工具方法
工具方法
//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg #user').fieldSerialize());
//得到某个字段的value 值
alert($('#reg #user').fieldValue());
//重置表单
$('#reg').resetForm()以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！