异步校验用户名是否存在

Posted 希望明天会更好

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了异步校验用户名是否存在相关的知识,希望对你有一定的参考价值。

第一步:

  导入jquery

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

第二步:

  建个表单和输入框

<body>
    <form >
        输入用户名:<input type="text" id="username" > 
     <span id = "usernameInfo"></span> </form> </body>

 

第三步:

  写JS代码,blur()方法

<script type="text/javascript">
    $(function(){
        $("#username").blur(function(){
            //1、失去焦点,获得输入框的内容
            var usernameInput = $(this).val();
            //2、去服务端校验该用户名是否存在
            $.post(
                "${pageContext.request.contextPath}/checkUsernameServlet",
                {"username":usernameInput},
                function(data){
                    var isExist = data.isExist;
                    //3、根据返回的isExist动态地显示信息
                    var usernameInfo = "";
                    if(isExist){
                        //该用户存在
                        usernameInfo = "该用户名已经存在"                            
                    }else{
                        usernameInfo = "该用户名可以使用"
                    }
                    $("#usernameInfo").html(usernameInfo);
                },
                "json"
            );
        });
    });
</script>

第四步:

  在web层创建Servlet(我分为web,service,dao和domain,domain负责封装,因为只有一个username参数,就没用到domain)

  以JSON格式返回isExist

public class CheckUsernameServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {

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


    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        doGet(request,response);
    }

}

第五步:

  创建Service

public class UserService {

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

}

第六步:

  创建Dao(注:使用的是C3P0和DBUtils,所以要导入各种包和配置文件)

public class UserDao {

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

第七步,代码完成并测试

 

以上是关于异步校验用户名是否存在的主要内容,如果未能解决你的问题,请参考以下文章

AJAX异步校验

案例7-用户名异步校验

用户名异步校验

校验用户名是否存在

项目实战---使用ajax完毕username是否存在异步校验

案例16-validate自定义校验规则校验用户名是否存在