Detailed explanation of Ajax method to implement Form form submission and precautions

When using the form form, once you click submit to trigger the submit event, it will generally cause the page to jump. The control of behaviors such as jumps between pages is often in the backend, and the backend will control page jumps and data transfer. , but at some point you don’t want the page to jump, or you want to put control on the front end and use js to operate the page jump or data changes. This article mainly introduces the use of Ajax methods to implement Form form submission and precautions. Friends in need can refer to it. I hope it can help everyone.

Generally, for this kind of asynchronous operation, we will think of the ajax method, so after implementing the function, we compiled this article to implement the form submission and subsequent asynchronous operations through the ajax method.

Common form submission methods

          
  
 
 
用户名：
 
密　码：
 
 
 
 
  

After clicking the login button, the form form submission event is triggered, and the data is transmitted to the backend, which controls the page jump and data.

ajax implementation of form submission method

After modification, the code is as follows:

            
  
 
 
用户名：
 
密　码：
 
 
 
 
  

Notes

• In the common method, click The type of the login button is "submit" type;

• In the common method, the action of the form is not empty;

• In the ajax method What needs attention is the parameters in the $.ajax method: dataType and data.

I rarely write front-end code. The level is entry-level. I can understand it and change it, so I often use Baidu, and this time I also used it to implement this function. Baidu, however, the dataType parameter value set in the $.ajax method of the code I received from Baidu was "html" instead of "json", which caused me to keep reporting errors when I first debugged it. Finally, I changed it to "json". Success, so here is a special explanation and reminder, don't go the wrong way like me. There is also the data value transmitted to the server. Like the above code, just serialize and transmit the data in the form.

Related recommendations:

Detailed explanation of the method of not jumping when the page is submitted when the Form form is submitted in html

Commonly used in JavaScript form form code sharing (collection)

#Detailed explanation on the submission usage of form form submit and button in html

The above is the detailed content of Detailed explanation of Ajax method to implement Form form submission and precautions. For more information, please follow other related articles on the PHP Chinese website!