异步校验用户名是否存在

最新推荐文章于 2022-03-22 20:02:22 发布

weixin_34132768

最新推荐文章于 2022-03-22 20:02:22 发布

阅读量280

点赞数

文章标签： java 测试 javascript ViewUI

原文链接：http://www.cnblogs.com/yg1024/p/8366495.html

版权

第一步：

　　导入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;
    }
}

第七步，代码完成并测试

转载于:https://www.cnblogs.com/yg1024/p/8366495.html

weixin_34132768

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
异步校验用户名是否存在

第一步：　　导入jquery<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>第二步：　　建个表单和输入框<body> <form > 输入用户名：<input type="text" id="u...
复制链接

扫一扫