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

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




完毕~~~~~

  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个基于AJAX实现的用户注册信息异步校验的示例代码: HTML代码: ``` <form id="register-form"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <span id="username-tips"></span><br> <label for="email">电子邮箱:</label> <input type="email" id="email" name="email"> <span id="email-tips"></span><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password" name="confirm-password"> <span id="password-tips"></span><br> <button type="submit">注册</button> </form> ``` JavaScript代码: ``` $(document).ready(function() { // 防止表单默认提交 $('#register-form').submit(function(event) { event.preventDefault(); }); // 用户名异步校验 $('#username').blur(function() { var username = $('#username').val(); $.ajax({ url: '/check-username', type: 'POST', data: {username: username}, success: function(data) { if (data.status === 'success') { $('#username-tips').text(''); } else { $('#username-tips').text(data.message); } } }); }); // 电子邮箱异步校验 $('#email').blur(function() { var email = $('#email').val(); $.ajax({ url: '/check-email', type: 'POST', data: {email: email}, success: function(data) { if (data.status === 'success') { $('#email-tips').text(''); } else { $('#email-tips').text(data.message); } } }); }); // 密码异步校验 $('#password').blur(function() { var password = $('#password').val(); var confirmPassword = $('#confirm-password').val(); if (password !== confirmPassword) { $('#password-tips').text('两次密码不一致'); return; } $('#password-tips').text(''); }); // 提交表单 $('button[type="submit"]').click(function() { var username = $('#username').val(); var email = $('#email').val(); var password = $('#password').val(); var confirmPassword = $('#confirm-password').val(); if (!username || !email || !password || password !== confirmPassword) { alert('请正确填写表单'); return; } $.ajax({ url: '/register', type: 'POST', data: $('#register-form').serialize(), success: function(data) { if (data.status === 'success') { alert('注册成功'); } else { alert(data.message); } } }); }); }); ``` 以上代码,通过使用jQuery的$.ajax方法,实现了异步校验用户名、电子邮箱、密码等信息,并在前端页面上实反馈校验结果。在提交表单,再次校验表单数据的合法性,如果表单数据无误,则使用AJAX提交表单数据给后端服务器进行注册处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值