What are the methods of jquery form submission?

WBOY
Release: 2022-06-02 15:57:27
Original
6830 people have browsed it

There are four methods for form submission: 1. "$.ajaxSubmit" method, which requires the use of the "jquery.form" plug-in; 2. "$.getJSON" method, which submits data in GET mode; 3. " $.post" method, which receives relatively large data; 4. "$.ajax" method, which generally encapsulates asynchronous methods.

What are the methods of jquery form submission?

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

What are the methods of jquery form submission?

There are many ways to submit forms in jQuery. Now let’s talk about the four commonly used ones, namely ajaxSubmit() and getJSON. (), post(), ajax().

1. $.ajaxSubmit method

Using ajaxSubmit() to submit a form must first be implemented by using the third-party plug-in jquery.form.
Under normal circumstances, if you submit directly using the form, the current page after submission will jump to the page pointed to by the action in the form. If we do not want the page to jump after submitting the form, then we can use ajaxSubmit() method to submit.
Next, let’s take a look at the writing method submitted by ajaxSubmit():
Html:

Copy after login
Copy after login
         

**jQuery: **1. Original writing method (this writing method does not need to be used in the form form Fill in the path inside)
What are the methods of jquery form submission?
2. Simple writing method
What are the methods of jquery form submission?

2. $.getJSON method

relative to JSON Compared with the traditional direct transmission of naked data through GET and POST, JSON is more structurally reasonable and safer. The getJSON() function is just a simplified version of the ajax() function that sets the JSON function. Compared with get() and post(), it has certain advantages in passing data and can be used across time.
Note: Because $.getJSON submits data in GET mode, you cannot submit an excessive amount of data. You can choose $.post to submit.
Writing method: Html:

Copy after login
Copy after login
         

jQuery:
What are the methods of jquery form submission?
##3. $ .post method

There is no difference between the writing of the post() function and the getJSON() function, but a special feature of post is to declare the data format, which is type. Type is the requested data type, which can be json. , html and other types, if we set the parameter to: json, then the returned format is json format; if not set, the returned format is a string.

As mentioned above, the post() function can be used to receive a relatively large amount of data. This is an advantage over other methods. Usually in many cases we will choose to use the post() method to submit the form.
Let’s take a look at how it is written:

Html: (Same as the html submitted by $.getJSON)
jQuery:

//提交按钮的点击事件
function btnSubmit(id) {
     //获取页面数据
     var id = $("#myForm [name='id']").val();
     //提交表单
     $.post("url", //请求路径
          {
              id: id  //参数
           },
           function (¬data) {
               if (data.State) {
                    alert(data.Text);
                } else {
                    alert(data.Text);
                }
           }, "json");
}
Copy after login

4. $.ajax method

$ .ajax is a commonly used

ordinary encapsulation asynchronous method.
Html: (Same as the html submitted by $.getJSON)
jQuery:

What are the methods of jquery form submission?
Note : Generally, in simple cases, $.ajax can be used directly without any parameters.

Video tutorial recommendation:

jQuery video tutorial

The above is the detailed content of What are the methods of jquery form submission?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template