Written in front
When using form form form, once clicking submit triggers submit event, it will generally make page jump, the control of jump between pages is often in the back end, the back end will control page Jump and data transfer, but sometimes do not want page jump, or want to control the front end, through js to manipulate page Jump or data change.
In general, this kind of asynchronous operation, we will think of the ajax mode, so after realizing the function, we sorted out this article, through the ajax method to achieve form submission and subsequent asynchronous operation.
Common form submission methods
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>login test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="login test"> </head> <body> <div id="form-div"> <form id="form1" action="/users/login" method="post"> <p>User name:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p> <p>dense Code:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p> <p><input type="submit" value="Sign in"> <input type="reset" value="Reset"></p> </form> </div> </body> </html>
After clicking the login button, the submission event of the form form is triggered, and the data is transmitted to the back end, which controls the page Jump and data.
ajax implements form submission
The code after modification is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>login test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="ajax mode"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> function login() { $.ajax({ //Several parameters need to be noted. type: "POST",//Method type dataType: "json",//The expected data type returned by the server url: "/users/login" ,//url data: $('#form1').serialize(), success: function (result) { console.log(result);//Print the data returned by the server (for debugging) if (result.resultCode == 200) { alert("SUCCESS"); } ; }, error : function() { alert("Abnormal!"); } }); } </script> </head> <body> <div id="form-div"> <form id="form1" onsubmit="return false" action="##" method="post"> <p>User name:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p> <p>dense Code:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p> <p><input type="button" value="Sign in" onclick="login()"> <input type="reset" value="Reset"></p> </form> </div> </body> </html>
Matters needing attention
- In common use, the type of login button clicked is "submit" type.
- In common use, the action of form is not empty.
- Note the parameters in the $. ajax method: dataType and data.
I seldom write the front-end code, the level is the entry level, can understand and change, so many times it is Baidu, like this function is achieved by Baidu, but the code I Baidu to set in the $.ajax method of data type parameter value is "html" rather than "json", resulting in my debugging at the beginning has been wrong, and eventually changed to "json". "Successful, so here's a special note and a reminder, don't go wrong like me, there is the data value to the server, like the code above, the form form of data serialization transmission can be.