AJAX异步请求验证用户名是否存在

adminAdd.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>管理员添加</title>
        <script type="text/javascript">

            function userNameValidate() {
                var xmlHttp = new XMLHttpRequest();
                //打开一个http连接
                xmlHttp.open("post", "adminCount", true);
                xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                var userNameValue = document.getElementById("userName").value;
                xmlHttp.send("userName=" + userNameValue);//发送请求
                xmlHttp.onreadystatechange = function () {
                    //响应接收完成
                    if (xmlHttp.readyState === 4) {
                        //status==200表示成功
                        if (xmlHttp.status === 200) {
                            //响应的文本内容，表示用户名数量
                            var num = xmlHttp.responseText;
                            if (num === "0") {
                                document.getElementById("userNameMsg").innerHTML = '<font color="#00ff00">此用户名可用！</font>'
                            } else if (num === "-1") {
                                document.getElementById("userNameMsg").innerHTML = '<font color="#ff0000">系统错误！</font>'
                            } else {
                                document.getElementById("userNameMsg").innerHTML = '<font color="#ff0000">此用户名已存在！</font>'
                            }
                        }
                    }
                }
            }

            //XMLHttpRequest 同步执行
            function userNameValidateSync() {
                var xmlHttp = new XMLHttpRequest();
                //打开一个http连接
                xmlHttp.open("post", "adminCount", false);
                xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                var userNameValue = document.getElementById("userName").value;
                //发送请求
                xmlHttp.send("userName=" + userNameValue);
                //响应的文本内容，表示用户名数量
                var num = xmlHttp.responseText;
                if (num === "0") {
                    document.getElementById("userNameMsg").innerHTML = '<font color="#00ff00">此用户名可用！(同步)</font>'
                } else if (num === "-1") {
                    document.getElementById("userNameMsg").innerHTML = '<font color="#ff0000">系统错误！(同步)</font>'
                } else {
                    document.getElementById("userNameMsg").innerHTML = '<font color="#ff0000">此用户名已存在！(同步)</font>'
                }
            }
        </script>


    </head>
    <body>
        <form action="addAdmin.action" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" name="userName" id="userName" onchange="userNameValidate()"/>
                        <label id="userNameMsg"></label>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="text" name="password" id="password"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="添加"/>
                    </td>
                    <td>
                        <input type="reset" value="重置"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Servlet : AdminCount.java

import util.JdbcUtil;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;

/**
 * @author xuehj2016
 */
@WebServlet(name = "AdminCount", urlPatterns = "/adminCount")
public class AdminCount extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
            IOException {
        request.setCharacterEncoding("utf-8");
        String userName = request.getParameter("userName");
        String sql = "select count(1) as num from admin where userName =? ";
        PrintWriter out = response.getWriter();
        try {
            long a = (long) JdbcUtil.query(sql, userName).get(0).get("num");
            response.setContentType("text/html;charset=utf-8");
            Thread.sleep(5000);
            out.print(a);
        } catch (SQLException e) {
            e.printStackTrace();
            out.print(-1);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
            IOException {
        doPost(request, response);
    }
}

AJAX异步请求验证用户名是否存在

猜你喜欢