使用Ajax方式实现用户名的唯一性校验-JAVA

使用Ajax方式实现用户名的唯一性校验-JAVA

文章参考：链接

本文章说明如何实现以下效果：

用户在前端页面的用户名输入框输入一个用户名，当鼠标的光标离开输入框时，系统自动检验用户名的唯一性，并在前端页面给出提示。

这样可以节省资源，避免用户资源的浪费，因为以前所使用的方法，是在用户点击注册之后才去进行用户名的唯一性校验，如果错误，则需要返回一个新的界面并且提示用户名重复，即占用了又浪费了用户流量。

前端html+js代码：

<body>
        <div class="wrap">
            <div class="guimeilogo"></div>
            <div class="register">
                <div class="top">
                    <h1>新用户注册</h1>
                    <a href="/shop/views/login.jsp">已有账号</a>
                </div>
                <div class="mid">
                    <form action="/shop/register" method="post">
                        <input type="text" name="username" id="username" placeholder="亲，您的昵称" required="required" />
                        <div id="showMessage"></div>

                        <input type="password" name="password" id="password" placeholder="密码" required="required" />
                    
                        <input type="text" name="email" id="email" placeholder="邮箱" required="required" />


                        <input type="text" name="telephone" id="telephone" placeholder="手机号" required="required"/>

                        <div class="sec">

                            <input type="text" name="code" id="code" placeholder="验证码" required="required" />

                            <a  class="send" onclick="send()"> 发送验证码 </a>

                            <script>
                                function send(){

                                    return false;
                                }
                            </script>
                        </div>
                        <input type="submit" id="submit" value="注册"/>

                    </form>
                </div>
            </div>
        </div>
        <script src="js/jquery-2.1.0.js"></script>
        <script>
            username.onblur = function () {
            <!--/工程名/Servlet映射路径-->
                $.post("/shop/chexkusername" ,{username:this.value }, function (date) {
                    if ( date.code == "10010" ){
                        $("#showMessage").html("对不起，此用户名已经被使用").css("color","red");
                    } else{
                        $("#showMessage").html("该用户名可以使用").css("color","blue")
                    }
                });
            }
        </script>
    </body>
</html>

后端java代码：

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1、接收请求参数。
        String username = req.getParameter("username");
        // 2、调用DAO 检验用户名是否唯一。
        IUserDAO dao = new UserDAOImpl();
        boolean username1 = dao.Username(username);
        // 3、设置编码格式。
        resp.setContentType("text/json;charset=UTF-8");
        // 4、将检验结果返回给浏览器（响应Ajax请求）
        PrintWriter writer = resp.getWriter();
        Map<Object, Object> Map = new HashMap<>();
        //如果输入的用户名和数据库表内的一致则提示用户名已经被使用
        if (username1){
            //code、message为状态码
            Map.put("code","10010");
            Map.put("message","用户名已经被使用");
        //否则则是不一致则提示登录成功。
        } else{
            Map.put("code","10086");
            Map.put("message","恭喜，用户名可用");
        }
        //转为JSOn
        String s = JSON.toJSONString(Map);

        writer.write(s);
        writer.close();
    }