异步校验用户名是否存在

Posted 2021-03-12 zhai1997

在用户注册时，要保持用户名的唯一性，因此，要对用户名进行校验，而等到用户提交时再进行校验是极其不合理的，因此就需要在用户输入用户名后立即查询数据库对用户名的合法性进行校验。

1、js函数

 <script type="text/javascript" src="jq/jquery-1.8.3.js"> </script>
    <script type="text/javascript">
        $(function(){
        $("#username").blur(function(){
          var usernameInput = $(this).val();
          $.get(
                  "${pageContext.request.contextPath}/ajaxservlet",
                  {"username":usernameInput},
                  function(data){
                    var isExist = data.isExist;
                    var usernameInfo = "";
                    if(isExist){
                      usernameInfo = "该用户名已经存在";
                      $("#usernameInfo").css("color","red");
                    }else{
                      usernameInfo = "该用户可以使用"
                      $("#usernameInfo").css("color","green");
                    }
                    $("#usernameInfo").html(usernameInfo);

                  },
                  "json"
          );
        });
      });
    </script>

（1）blur()是表单事件，元素失去焦点时触发，这里当输入用户名的输入框失去焦点时触发该事件并访问服务器开始对用户名进行校验。

（2）$("#usernameInfo").css("color","red");用到的是jq中的选择器。

（3）get里面的内容用到的是jq封装的ajax，里面有请求的地址，数据，回调函数以及返回的数据的格式。

2、web层的servlet和service层的函数

（1）servlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      response.setContentType("text/html; charset = utf-8");
        String username = request.getParameter("username");
        Register register=new Register();
        boolean isExist = false;
        try {
            isExist = register.checkUsername(username);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        response.getWriter().write("{"isExist":"+isExist+"}");
    }

调用service层的函数（该函数用来校验数据库中是否已经有该用户名）。

（2）service层：

    public boolean checkUsername(String username) throws SQLException {
        RegisterDao registerDao = new RegisterDao();
        Long isExist = registerDao.checkUsername(username);
        return isExist > 0 ? true : false;
    }

3、dao层

public class RegisterDao {
    public Long checkUsername(String username) {
        Connection con=null;
        con = C3p0Utils.getConnection();
        QueryRunner qr = new QueryRunner();
        String sql = "select count(*) from s_admin where name=?";
        Long query = null;
        try {
            query = (Long) qr.query(con,sql, new ScalarHandler(), username);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return query;
    }
}

用JDBC工具类获取连接后，查询用该用户名的用户数量并返回数据给service层。

4、效果展示

使用未出现的用户名：

 

 使用重复的用户名：