When using a form, once you click submit to trigger the submit event, it will generally make the page Jump. The control of the jump between pages and other behaviors is often in the back end. The back end will control the page Jump and data transmission, but sometimes you don't want the page Jump, or you want to put the control right in the front end to operate the page Jump or data change through js.
Generally, for this kind of asynchronous operation, we will think of ajax. Therefore, after realizing the function, we sorted out this article, and realized the submission of form and subsequent asynchronous operation through ajax method.
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 form submission event is triggered, and the data is transmitted to the back end, which controls the page Jump and data.
ajax implementation of form submission
After modification, the code 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 attention type: "POST",//Method type dataType: "json",//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(Trial adjustment) 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 methods, the type of the login button clicked is "submit";
- In common methods, the action of the form is not empty;
- In the ajax approach, note that $ Parameters in ajax methods: dataType and data.
I seldom write front-end code. The level is the entry level. It can be understood and changed. Therefore, baidu is often used to realize this function. However, the code I got from Baidu is $ The dataType parameter value set in the ajax method is "html" instead of "json", which leads me to report errors at the beginning of debugging. Finally, it is changed to "json" to succeed. Therefore, please note and remind me not to 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.