zoukankan      html  css  js  c++  java
  • 使用AJAX实现用户名的唯一性校验(注册界面)-JAVA(新手)


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

    所需要准备的:

    1. Servlet
    2. 注册界面的JSP
    3. 接口和实现类

    所需要的接口和实现类:

    接口: 

    /* * 用户注册 * 账号的唯一性校验,需要传参(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();
        }
    }

    个人理解:

        用户点击注册界面,在用户名一栏输入用户名,当鼠标的光标离开输入框时,就去检验用户的用户名是否有重复。

        这样可以节省资源,避免用户资源的浪费,因为以前所使用的方法,是在用户点击注册之后才去进行用户名的唯

        一性校验,如果错误,则需要返回一个新的界面并且提示用户名重复,即占用了又浪费了用户流量。

        所以选择AJAX——>AJAX,允许被浏览器和服务器通信而无需刷新当前页面的技术都被叫做AJAX。


  • 相关阅读:
    强大的js时间选择器 万年历
    js 锚点平滑定位
    php str_replace的替换漏洞
    绝对路径 相对路径 小结
    昨天去了长城
    [转载]71个做饭技巧好好记住了,不要忘记给自己做一顿美餐噢
    最近心情很糟,情绪很低落
    用javascript实现html页面之间的参数传递的四种方法
    解决ajax缓存问题
    [转载]30岁前男人需要完成的事
  • 原文地址:https://www.cnblogs.com/lxr521/p/10765335.html
Copyright © 2011-2022 走看看