This time I will bring you the Ajax method to implement Form form submission. What are theprecautionsfor the Ajax method to implement Form form submission. The following is a practical case, let's take a look.
Written in front
When using the form, once you click submit to trigger the submit event, the page will generally jump. The control of behaviors such as jumps between pages is often in the backend. The backend will control page jumps and data transfer. However, at some point, you don’t want the page to jump, or you want to put the control on the front end, through js To operate page jumps or data changes.
Generally, for this kind of asynchronous operation, we will all 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
login test
After clicking the login button, the submission event of the form form is triggered, and the data is transmitted to the backend. The backend controls page jumps and data.
ajax implementation of form submission method
After modification, the code is as follows:
login test
Notes
In the common mode, the type of the login button clicked is "submit" type;
In the common mode , the action of the form is not empty;
What needs to be noted in the ajax method 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. Just serialize and transmit the data in the form like the above code.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to make asynchronous requests with Ajax
Detailed explanation of the steps for Ajax to implement cross-domain requests
The above is the detailed content of Ajax method to implement Form form submission. For more information, please follow other related articles on the PHP Chinese website!