Using AJAX methods to implement form form submission

Source: Internet
Author: User

Turn http://www.cnblogs.com/han-1034683568/p/7199168.html write in front of the words

When using form form, once click Submit Trigger Submit event, will generally make the page jump, page jumps and other behavior control often in the back end, the backend will control the page jump and data transmission, but at some point do not want the page to jump, or want to put control on the front, Through JS to manipulate the page jump or data changes.

In general, this asynchronous operation, we will think of the AJAX approach, so after the implementation of the function of this article, through the Ajax method to implement the form form the submission and subsequent asynchronous operation.

Common Form form submission methods
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" ><Html><Head><Title>login Test</Title><Metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "><Metahttp-equiv="Pragma"Content="No-cache" ><Metahttp-equiv="Cache-control"Content="No-cache" ><Metahttp-equiv="Expires"Content="0" ><Metahttp-equiv="keywords"Content="Keyword1,keyword2,keyword3" ><Metahttp-equiv="description"Content="Login Test" ></Head><Body><DivId="Form-div" ><FormId="Form1"action="/users/login"Method="POST" ><P> User name:<InputName="UserName"Type="Text"Id="txtUserName"tabindex="1"Size="15"Value=""/></P><p> Password:<InputName="Password"Type="Password"Id="TextBox2"tabindex="2"Size="16"Value=""/></p> <p ><input type=  "submit" value= "login" >&nbsp< Span class= "Hljs-tag" ><input type= " Reset "value=" reset "></p> </form></div></body> </HTML>           

Click the login button, that is, trigger the form of the submission of the event, data transfer to the backend, the back-end control page jump and data.

Ajax implementation Form Submission method

After the modification is complete, the code is as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" ><Html><Head><Title>login Test</Title><Metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "><Metahttp-equiv="Pragma"Content="No-cache" ><Metahttp-equiv="Cache-control"Content="No-cache" ><Metahttp-equiv="Expires"Content="0" ><Metahttp-equiv="keywords"Content="Keyword1,keyword2,keyword3" ><Metahttp-equiv="description"Content="Ajax Way" ><ScriptSrc="Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></Script><ScriptType="Text/javascript" > functionLogin) {$.ajax ({Several parameters need to be noted for type:"POST",Method Type DataType:"JSON",Expected data type URL returned by the server:"/users/login",URL Data: $ (' #form1 '). Serialize (), Success:function (Result) {Console.log (result);Print data returned by the server (for debugging purposes)if (Result.resultcode = =) {alert ("SUCCESS"); } ; }, Error:function) {alert (exception "); } }); }</Script></Head><Body><DivId="Form-div" ><FormId="Form1"onsubmit="Return False"action="##"Method="POST" ><P> User name:<InputName="UserName"Type="Text"Id="txtUserName"tabindex="1"Size="15"Value=""/></P><p> Password:<InputName="Password"Type="Password"Id="TextBox2"tabindex="2"Size="16"Value=""/></P><p><input type="button" value="Login" onclick="login ()" >& nbsp <input type= "reset" value= "reset " ></p> </form> </div></body></html>        
Precautions
    • In the usual way, the type of the login button clicked is "Submit";
    • In the common way, the action of form is not empty;
    • The Ajax way to note is the parameters in the $.ajax method: DataType and data.

I usually rarely write front-end code, level is the entry level, can read can change, so many times are Baidu, like this feature
The implementation is also with the help of Baidu, but I Baidu to the code in the $.ajax method set in the datatype parameter value of "HTML" instead of "JSON", causing me to start debugging at the time of the error, and eventually changed to "JSON" to succeed, so here special note and remind, Don't go the wrong way with me, there is the data value transmitted to the server, like the above code, the form of the form is serialized in the transmission.

Using AJAX methods to implement form form submission

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.