使用AJAX实现用户名的唯一性校验（注册界面）-JAVA（新手）-CSDN博客

本文链接：https://blog.csdn.net/Java_Wcc/article/details/89506997

使用AJAX实现用户名的唯一性校验（注册界面）-JAVA（新手）

(1)实现用户名的唯一性校验

所需要准备的：

Servlet
注册界面的JSP
接口和实现类

所需要的接口和实现类：

接口： 

/*
    *  用户注册
    *  账号的唯一性校验，需要传参（username）
    * */
    boolean Username(String username);


实现类：

 @Override
    public boolean Username(String username) {
        String sql = "select * from user where username = ?";
        List<Map<String, Object>> list = DBUtil.excuteQuery(sql, username);
        return list.size()>0;
    }

所需要的注册的JSP界面：

    <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>

个人理解：

　　　　获取Username-使用Post提交-使用if、else判断-如果说状态码等于10010则意味着用户名相重，则提示用户名已经被使用。

　　　　　　　　　　　　　　　　　　　　　　　　反之，如果不等于10010则意味着用户名可以使用。

所需要的Servlet：

@WebServlet("/chexkusername")
public class ChexkUsernameServlet extends HttpServlet {

　　/*
　　*  注册时用户名的唯一性校验。
　　*
　　*  因为是判断用户名是否重复，则需要传递参数（user表里的username）
　　*  如果说重复则需要提示用户让用户进行更改。反之则提示用户可以使用。
　　*
　　*  所以首先，我们在Servlet中需要干的第一件事就是获取请求参数username
　　*  第二步就是调用DAO层检验用户名是否唯一。
　　*  第三步需要设置编码格式，因为是使用post请求，在浏览器中会出现乱码的现象，所以我们要设置一下编码格式。
　　*  第四步我们需要将检验结果返回给浏览器。
　　*  然后进行是否被使用的判断，还有可用和不可用的代码块和语句的提示。
　　*
　　*  在最后一步将Map转为JSON，因为使用JSON可以更方便的获取到值，而不用再使用共享参数、请求转发等操作。
　　* */


    @Override
    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();
    }
}