What is the method used by jquery form

In jquery, you can use the ajaxForm() and ajaxSubmit() methods to use "jquery form". "jquery form" is a plug-in for asynchronous form submission, which is used to submit the form and set the form submission time. Parameters that can verify and process the form data before submitting the form and call the function after the form is submitted.

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

How to use jquery form

jquery form is a plug-in for form asynchronous submission. It can easily submit the form, set the parameters for form submission, and checksum the form data before submitting the form. Function call after processing and form submission.

This plug-in has two main methods:

ajaxForm() and ajaxSubmit(),

They integrate everything from controlling form elements to deciding how to Function to manage the submission process;

They can accept 0 or one parameter, and the parameter can be a function or a JS object, similar to json format;

ajaxForm() cannot submit the form, just Prepare for form submission:

1: Pass in function

$("#form1").submit(function () {
    $('#form1').ajaxForm(function () {
        alert("提交成功2")
    })
})

But although I read many blogs written like this, after running the actual code, I found that "Submission Successful 2" did not Print, that is, the function is not entered,

and after submission, the page will jump to the address of the action. In other words, this method cannot implement asynchronous submission of the form. It only prepares for form submission, but the incoming A function method is not suitable for this method. Because I haven’t entered it, I don’t know if there is something wrong with my writing. But if the option passed in is an object, it will take effect.

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: Pass in a js object

$('#form1').ajaxForm(options)

ajaxSubmit() method: implement asynchronous submission of the form

$("#form1").submit(function () {
    $('#form1').ajaxSubmit(function () {
        alert("提交成功2")
    })
    return false;
})

Must return false here, otherwise the form will be submitted twice. Because it is submitted once asynchronously, it is submitted once by default;

$('#form1').ajaxSubmit(options)

But if the options object is passed in, it will only be submitted once

Video tutorial recommendation: jQuery video tutorial

The above is the detailed content of What is the method used by jquery form. For more information, please follow other related articles on the PHP Chinese website!