简单实现Ajax注册验证

最新推荐文章于 2021-08-05 13:09:26 发布

Lov_sb

最新推荐文章于 2021-08-05 13:09:26 发布

阅读量525

点赞数

分类专栏： java

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.先写个简单的注册页面及Ajax逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Regist</title>
</head>
<body>
<script>
    var xmlHttp;
    function createXMLHttp() {
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();

        }else {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
    }
    function checkUserid(userid) {
        createXMLHttp();
        xmlHttp.open("POST","CheckServlet?userid="+userid);
        xmlHttp.onreadystatechange = checkUseridCallback;
        xmlHttp.send(null);
        document.getElementById("msg").innerHTML = "正在验证...";

    }
    function checkUseridCallback() {
        if(xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                var text = xmlHttp.responseText;
                if (text == "true") {
                    flag = false;
                    document.getElementById("msg").innerHTML = "repeat!";

                } else {
                    flag = true;
                    document.getElementById("msg").innerHTML = "regist."
                }
            }
        }
    }
    function checkForm() {
        return flag;
    }
</script>

<form action="regist.html" method="post" onsubmit="return checkForm()">
    UserId:<input type="text" name="userid" onblur="checkUserid(this.value)"><span id ="msg"></span><br>
    name:<input type="text" name="name"><br>
    password:<input type="password" name="password"><br>
    <input type="submit" value="regist">
    <input type="reset" value="reset">
</form>
</body>
</html>

2.写个Servlet来实现后台查询

public class CheckServlet extends HttpServlet {
    public static final String DBDRIVER = "com.mysql.jdbc.Driver";
    public static final String DBURl ="jdbc:mysql://localhost:3306/lov";
    public static final String DBUSER = "root";
    public static final String DBPASS = "997103";
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
        this.doPost(request,response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
         request.setCharacterEncoding("GBK");
         response.setContentType("text/html");
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        PrintWriter out =response.getWriter();
        String userid = request.getParameter("userid");
        try{
            Class.forName(DBDRIVER);
            conn = DriverManager.getConnection(DBURl,DBUSER,DBPASS);
            String sql = "SELECT COUNT(userid) FROM user WHERE userid=?";
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1,userid);
            rs = pstmt.executeQuery();
            if(rs.next()){
                if(rs.getInt(1)>0){
                    out.print("true");
                }else {
                    out.print("false");
                }
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            try {
                conn.close();
            }catch (SQLException e){
                e.printStackTrace();
            }
        }
    }
}

3.在web.xml里新建servlet节点内容

<servlet>
        <servlet-name>CheckServlet</servlet-name>
        <servlet-class>ajaxdemo.CheckServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CheckServlet</servlet-name>
        <url-pattern>/CheckServlet</url-pattern>
    </servlet-mapping>
</servlet>