AJAX技术无刷新登录窗口界面后台数据验证

分享的是之前使用AJAX和JAVA完成的登录验证的功能,第一次发这样的博客，不足的地方希望大佬能评论指点指点。

login.html代码

<div class="cd-window">
    <div class="cd-login">
        <div class="form-logo">
            <span>后台登陆界面</span>
        </div>
        <div id="warn">
            <i class="fa fa-minus-square-o" style="color:red;"></i>
            <p class="error"></p>
        </div>
        <div class="form-login">
            <input type="text" autocomplete="off" id="username" class="username" placeholder="用户名/邮箱" />
        </div>
        <div class="form-login">
            <input type="password" autocomplete="off" id="password" class="password"placeholder="密码" />
        </div>
        <div class="form-login">
            <button id="login-btn">登录</button>
            <p><input type="checkbox" name="autologin" id="autologin" value="10"/>
               <label for="autologin" >自动登录</label>
               <a href="javascript:;" class="switch">手机快捷登录</a>
            </p>
        </div>
        <div class="form-login">
            <p>
                <a href="#" >立即注册</a>
                <a href="#" class="a-right">忘记密码</a>
            </p>
        </div>
    </div>
</div>

界面

Js的代码

            $("#login-btn").on("click",function(){ /*登录验证*/
                var user_v=$("#username").val(),  //获取用户名的value
                psw_v=$("#password").val(), //获取密码的value
                warn=$("#warn"),
                error=$(".error"); 
                warn.css({visibility: 'hidden'});
                error.empty();
                if(user_v.length>0){
                    if(psw_v.length>0){
                      console.log("登录成功");
                      check_user(user_v,psw_v);  
                    }
                    else{
                      warn.css({visibility: 'visible'});
                      error.text("请输入密码");
                    }
                }else if(psw_v.length==0){
                    warn.css({visibility: 'visible'});
                    error.text("用户名和密码不能为空");
                }else{
                    warn.css({visibility: 'visible'});
                    error.text("请输入帐户");
                }
            });  

            function check_user(user,psw){  /*验证用户密码函数模块*/
            var warn=$("#warn");
            var error=$(".error");
            var auto=$("#autologin:checked").val();
            $.post("userservlet?method=1",   {username:user,password:psw,autologin:auto},function(data){
            /* 使用AJAX的请求方式中的Post方式 */
                console.log(data); 
                /*利用控制台观察返回的数据*/
                if(data=="登录成功"){ 
                //返回的data为登录成功进行页面跳转
                    window.location.href = "*******.jsp";   
                }else{
                    warn.css({visibility: 'visible'});
                    error.text(data);
                }
            });
        }

后台servlet代码

public class userservlet extends HttpServlet {
    private Userinter userinter=null;

    public void destroy() {
        super.destroy(); 
    }


    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

    }


    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String method=request.getParameter("method"); 
        //接收前台传递的method值制定相应的类进行处理
        switch (method) {
        case "1":
            check_user(response, request); 
            break;
        default:
            break;
        }
    }

    public void check_user(HttpServletResponse response,HttpServletRequest request)throws IOException{

        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String username=request.getParameter("username");
        String password=request.getParameter("password");
        User user=new User();  //创建User实体类进行set
        user.setUsername(username);  
        user.setPassword(password);
        String msg=null;
        boolean flag=userinter.check_login(user); 
        /*这里的userinter.check_login是我后台查询数据库的逻辑类，可以自行创建的Java类代码返回
        boolean类型来进行判断用户名和密码是否正确 */
        if(flag){ 
            msg="登录成功"; 
            response.getWriter().print(msg); //利用该方法返回给前台的data值
        }else{
            msg="账号或密码不正确";
            response.getWriter().print(msg);
        }

    }
}

    public void init() throws ServletException {
        userinter=new UserDao();
    }

    public void check_user(HttpServletResponse response,HttpServletRequest request)throws IOException{
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String username=request.getParameter("username");
        String password=request.getParameter("password");
        User user=new User();
        user.setUsername(username);
        user.setPassword(password);
        String msg=null;
        boolean flag=userinter.check_login(user);
        if(flag){
            msg="登录成功";
            response.getWriter().print(msg);
        }else{
            msg="账号或密码不正确";
            response.getWriter().print(msg);
        }

    }

最终的界面效果