2021 1 16 改进昨天的代码

完善昨天的代码，用异步对象发送异步请求检查账号密码是否存在。正确就用表单submit()跳转，否则弹出提示框

登录界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>家庭记账本</title>
        <style type="text/css">/*设置CSS样式*/
        input[type=text]{
            color: #0099FF;
            width: 200px;
            height: 20px;
        }
        input[type=password]{
            color: #0099FF;
            width: 200px;
            height: 20px;
            
        }
        div{
            background-color:white;
            width: 300px;
            top:100px;
            left: 200px;
        }
    </style>
    </head>
    <script>/*给标签绑定函数验证表单*/        
        window.onload=function(){
            var name=document.getElementById("name")
            var password=document.getElementById("pass")
            var setbtn=document.getElementById("setbtn")
            var loginbtn=document.getElementById("loginbtn")
            var form=document.getElementById("loginform")
            setbtn.onclick=function(){
                form.action="setuser.jsp"
                form.submit()
            }
            loginbtn.onclick=function(){
                    if(name.value==""){
                        alert("请输入账号")
                    }
                    else{
                        createRequest("Aservlet?method=login&name="+name.value+"&password="+password.value)
                    }
                }
            }
            function createRequest(url){
                http_request=new XMLHttpRequest();
                http_request.onreadystatechange=function(){
                    if(http_request.readyState==4){
                        if(http_request.status==200){
                            alert(http_request.responseText)
                            if(http_request.responseText){
                                window.location.href="login.jsp"
                            }else{
                                alert("账号或密码错误！")
                            }
                        }
                    }
                }
                http_request.open('GET',url,true);
                http_request.send(null)
    }
    </script>
    <body>
    <div id="div1">
        <h2 align="center"><font size="5" color="skyblue">家庭记账本账号注册系统</font></h2>
        <form  method="post" id="loginform">
                <center>账号<input type="text" id="name" name="name" align="right"/><span id="YN"></span><br><br>
                        密码<input type="password" id="pass"  align="center"/><span id="YP"></span><br>
                        <input type="button" id="loginbtn" value="登录" align="center" />
                        <input type="button" id="setbtn" value="注册" align="center"/>
                </center>
        </form>
    </div>
    </body>
</html>

后台servlet：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//         TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String method=request.getParameter("method");
        dao p=new dao();
        if(method.equals("login"))
        {
            String name=request.getParameter("name");
            String password=request.getParameter("password");
            PrintWriter out=response.getWriter();
            try {
                    out.println(p.check(name, password));
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
//        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

posted on 2021-01-16 19:33 sean1246 阅读(83) 评论(0) 收藏举报