$. ajax and java background to achieve user login function

Keywords: Session JQuery SQL Database

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.

  1. First, you need to write an html page that shows the page you logged in, even if it's the first step.

  2. 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.

  3. 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.

  4. 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.

  5. Database processing I have time to write again.

Posted by kutyadog on Sat, 18 May 2019 19:41:00 -0700