注册时异步检测用户名是否已经存在

需求

  • 在注册页面中，当用户输入用户ID后，客户端判断用户ID是否以及存在。
  • 即：当文本输入框失去焦点后，发送Ajax请求，查询数据库是否存在该用户名。如果存在：则提示此用户太受欢迎，请更换一个名字；如果不存在，则提示信息可以用

实现

注册页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>regist</title>
    <script src="js/jquery-3.5.1.min.js"> </script>
    <script>
        //入口函数
        $(function () {
            //给用户名输入框绑定blur事件
            $("#username").blur(function () {
                //使用jQuery对象获取输入框内容
                var username = $(this).val();
                //发送Ajax请求
                //期望服务器返回的数据格式：{"userExist":true,"msg":"此用户太受欢迎，请更换一个名字"}
                //                     {"userExist":false,"msg":"用户名可用"}
                $.get("findUserServlet",{"username":username},function (data) {
                    if (data.userExist == false){
                        //设置span标签的属性
                        $("#userspan").css("color","green");
                        $("#userspan").html(data.msg);
                    }else{
                        $("#userspan").css("color","red");
                        $("#userspan").html(data.msg);
                    }
                },"json");
            });
        });
    </script>
</head>
<body>
<form action="/login"method="post">
    <input type="text" id="username" name="username"placeholder="请输入用户名">
    <span id="userspan"></span>
    <br><br>
    <input type="text"name="password"placeholder="请输入密码"><br><br>
    <input type="submit"value="登录">
</form>
</body>
</html>

判断逻辑findUserServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@WebServlet("/findUserServlet")
public class findUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收用户数据
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");
        Map<String,Object> map = new HashMap<String, Object>();
        //在项目中hxx实际上是查询数据库是否已经存在该用户名
        if ("hxx".equals(username)){
            map.put("userExist",true);
            map.put("msg","此用户太受欢迎，请更换一个名字");
        }else {
            map.put("userExist",false);
            map.put("msg","用户名可用");
        }
        //将map转换为json字符串
        ObjectMapper objectMapper = new ObjectMapper();
        //传输给客户端
        objectMapper.writeValue(response.getWriter(),map);
    }

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