所属分类:web前端开发
在jquery中,可以利用ajaxForm()和ajaxSubmit()两个方法来使用“jquery form”,“jquery form”是一个表单异步提交的插件,用于提交表单并设置表单提交的参数,能够在表单提交前对表单数据进行校验和处理和表单提交后的函数调用。
前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用
本教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。
jquery form是一个表单异步提交的插件,可以很容易提交表单,设置表单提交的参数,并在表单提交前对表单数据进行校验和处理和表单提交后的函数调用。
这个插件有两个主要方法:
ajaxForm() 和 ajaxSubmit(),
它们集合了从控制表单元素到决定如何管理提交进程的功能;
他们都可以接受0个或一个参数,参数可以为一个函数或者一个JS对象,类似json格式;
ajaxForm()不能提交表单,只是为表单提交做准备:
1:传入函数
$("#form1").submit(function () {
$('#form1').ajaxForm(function () {
alert("提交成功2")
})
})
登录后复制
但是虽然我看了很多博客都是这样写,我实际代码运行之后发现,“提交成功2”并没有打印,也就是函数没有进去,
而且提交后,页面会跳转到action的地址,也就是说,这个方法不能实现表单的异步提交,只是为表单提交做准备,但传入一个函数的方式不适合这个方法,因为没有进去,不知道是不是我写的有问题。但是如果传入一个option是对象,就能生效。
var options = {
url: "/day09/jqueryFormServlet", //提交地址:默认是form的action,如果申明,则会覆盖
type: "post", //默认是form的method(get or post),如果申明,则会覆盖
beforeSubmit: beforeCheck, //提交前的回调函数
success: successfun, //提交成功后的回调函数
target: "#output", //把服务器返回的内容放入id为output的元素中
dataType: "json", //html(默认), xml, script, json...接受服务端返回的类型
clearForm: true, //成功提交后,是否清除所有表单元素的值
resetForm: true, //成功提交后,是否重置所有表单元素的值
timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求
};
登录后复制
2:传入一个js对象
$('#form1').ajaxForm(options)
登录后复制
ajaxSubmit()方法:实现表单的异步提交
$("#form1").submit(function () {
$('#form1').ajaxSubmit(function () {
alert("提交成功2")
})
return false;
})
登录后复制
这里必须返回false,不然表单会提交两次,因为异步提交一次,默认提交一次;
$('#form1').ajaxSubmit(options)
登录后复制
但如果传入options对象则只会提交一次
视频教程推荐:jQuery视频教程
以上就是jquery form使用的方法是什么的详细内容,更多请关注zzsucai.com其它相关文章!