Ajax异步校验用户名是否存在

最新推荐文章于 2021-10-10 18:12:42 发布

sunqiana

最新推荐文章于 2021-10-10 18:12:42 发布

阅读量4.7k

点赞数 5

分类专栏： java

本文链接：https://blog.csdn.net/sunaxp/article/details/81025966

版权

java 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1客户端：

<input type="text" class="form-control" id="username" placeholder="请输入用户名">

<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">

<script type="text/javascript">
   $(function () {
        //为输入框绑定事件
        $("#username").blur(function () {
            //1失去焦点，获得表单输入数据
         //var usernameInput = $(username).val();
         var usernameInput = $(this).val();
         //alert(usernameInput);
         //2去服务端校验该用户名是否存在--ajax将用户名提交到服务器校验
         $.ajax({
            url:"${pageContext.request.contextPath}/checkUsername",
            type:"POST",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                data:{"username":usernameInput},
            success:function (data) {
                    //var str = JSON.stringify(data);
                    //alert(str);
               var isExit = data.isExist;
               //3根据返回的isExit动态显示信息
               var usernameInfo = "";
               if (isExit){
//                 //该用户名存在
                        usernameInfo = "该用户名已经存在";
                        $("#usernameInfo").css("color","red");
               }else {
                        usernameInfo = "该用户名可以使用";
                  $("#usernameInfo").css("color","green");
               }
               $("#usernameInfo").html(usernameInfo);
                },
            dataType:"json",
            }

         );

        });
    });
</script>

当用户名输入框失去焦点时，会自动校验用户名是否存在，当失去焦点时执行功能，为输入框绑定onblur事件 = function（）{

a:获得表单输入的数据

b:ajax将用户名提交到服务器去校验用户名

c:根据ajax返回的结果，动态提示用户名是否可用

}。

2服务器：三层（web层，service层，dao层）

web层：urlPatterns 为checkUsername的java代码(部分)

CheckUsernameServlet.java

//获得要校验的用户名
String username = request.getParameter("username");
//传递username到service层
UserService service = new UserService();
boolean isExit = false;
try {
    isExit = service.checkUsername(username);
} catch (SQLException e) {
    e.printStackTrace();
}

System.out.println("{\"isExist\":"+isExit+"}");
response.setContentType("application/json");
response.getWriter().write("{\"isExist\":"+isExit+"}");

UserService.java

public boolean checkUsername(String username) throws SQLException {
    UserDao dao = new UserDao();
    Long isExit = dao.checkUsername(username);
    return isExit > 0 ? true : false;
}

UserDao.java

public Long checkUsername(String username) throws SQLException {
    QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
    String sql = "select count(*) from user where username=?";
    Long query = (Long) runner.query(sql, new ScalarHandler(), username);
    return query;
}