jquery form怎么使用

本篇内容介绍了“jquery form怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

在jquery中，可以利用ajaxForm()和ajaxSubmit()两个方法来使用“jquery form”，“jquery form”是一个表单异步提交的插件，用于提交表单并设置表单提交的参数，能够在表单提交前对表单数据进行校验和处理和表单提交后的函数调用。

本教程操作环境：windows10系统、jquery3.2.1版本、Dell G3电脑。

jquery form怎么用

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 form怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！