The $.ajax code:
<script src="../js/jquery.mobile-1.4.5.min.js"></script> <script language="javascript"> function login(loginform){//Input form parameters if(loginform.username.value==""){ //Verify that the username is empty alert("Please enter the user name!");loginform.username.focus();return false; } if(loginform.password.value==""){ //Verify that the password is empty alert("Please input a password!");loginform.password.focus();return false; } var param="/wechat/UserServlet?action=login&username="+loginform.username.value+"&password="+loginform.password.value; //Connect login information to a string as a parameter for sending requests $.ajax({ url:param, type:"POST", dataType:"json", contentType: 'application/x-www-form-urlencoded; charset=UTF-8',//Prevent confusion code success:function(data){ if(data == false){ alert("You entered a wrong username or password!");loginform.username.focus();return false; }else{ window.location.href = "index.html";//Jump to Home Page } } }); } </script>
html code:
<!DOCTYPE html> <html> <head> <title>Landing test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" > <meta name="renderer" content="webkit|ie-stand|ie-comp" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css"> <style> a{margin:right;} </style> </head> <body> <div data-role="page" id="pageone" data-theme="a"> <div data-role="header"> <h1 style="font-family:'Song style',Arial, Helvetica, sans-serif;">Test landing</h1> </div> <div data-role="main" class="ui-content"> <div class="ui-field-contain"> <form name="loginform" method="POST" id="loginform" action=""> <div class="ui-field-contain"> <input autocomplete="off" type="text" name="username" placeholder="User name" data-rule="empty" data-name="accounts"> </div><br> <div class="ui-field-contain"> <input autocomplete="off" type="password" name="password" placeholder="Password" data-rule="empty" data-name="Password"> </div><br> <div class="ui-field-contain" align="right"> <a href="register.html" rel="external" float="right">No account, register immediately</a> </div> <div class="ui-field-contain"> <input type="submit" class="submit-btn" id="J_submit" value="Sign in" onClick="login(this.form)"> </div> </form> </div> </div> </div> </body> </html>
java background code:
You need to create a new servlet class and then copy dopost and doget
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response);//If the submission mode is GET, jump to dopost to execute } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String action = request.getParameter("action");//Acquisition operation if("login".equals(action)){//User login this.login(request, response); } } //User login private void login(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { User f = new User();//Here I write an entity class, which can be paid directly to the calling function parameters without using the entity class. request.setCharacterEncoding("UTF-8");//Prevent confusion code f.setusername(request.getParameter("username")); f.setpassword(request.getParameter("password")); int r = userdao.login(f);//Userdao is an instance of the UserDao class, which is generated at the beginning of the servlet //r is the user id returned. According to the id you generated, modify the following if criteria boolean flag = false;//The default login was unsuccessful if(r >= 0){//User login success HttpSession session = request.getSession(); session.setAttribute("username", f.getusername()); session.setAttribute("userid", r); session.setAttribute("identify", f.getidentify()); flag = true; }else{ flag = false; } response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); out.print(flag);//Return login information out.flush(); out.close(); }
The login() function implementation of the UserDao class:
public int login(User user){ int flag = -1;//flag's error values can be assigned at will, but you need to make sure that the error values do not intersect with your generated id. //flag error values can also represent a variety of errors, you can process and display in the js of the web page. String sql = "SELECT * FROM User WHERE UserName='"+user.getusername()+"'"; ResultSet rs = conn.executeQuery(sql);//conn is an example of connecting database classes, not to mention here try{ if(rs.next()){ String pwd = user.getpassword(); int userid = rs.getInt(1); if(pwd.equals(rs.getString(3))){ user.setidentify(rs.getInt(9)); flag = userid; rs.last(); int rowSum = rs.getRow(); rs.first(); if(rowSum != 1){ flag = -2; } }else{ flag = -1; } }else{ flag = -1; } }catch(SQLException se){ se.printStackTrace(); flag = -2; }finally{ conn.close(); } return flag; }
understand
There are comments in the code, but in order to prevent some people from understanding, or trying for the first time, I'll give you a detailed explanation here. (I also used it for the first time)
Some of the codes on the Internet are not particularly detailed. Most of them tell you the format of ajax, but no detailed examples are given. Here I give some examples that I have written in the hope of helping beginners understand.
-
First, you need to write an html page that shows the page you logged in, even if it's the first step.
-
Then, you need to submit your web data to the server, and complete the jump and prompt information operations, you need to use js. jquery provides ajax functions that you can use to achieve asynchronous communication with the server. The code is as follows.
-
Secondly, after you have written ajax, you need to write a processing function in the background, process the data from the web page, and then return the information it needs. First, if you want to know which function to perform, you need to get the parameters submitted by the web page from the action. For example, it's a login interface, and my action can do this.
aciton=login
Then get the action in the background, compare it, and jump to the handler you have written.
-
Processing function is not much to say, get the parameters given by url, and then use sql statements to query and compare from the database, then blabla bla. The code is as follows.
-
Database processing I have time to write again.