注册时判断用户名是否可用

<script>
			// 1.页面加载
			$(function () {
				// 2.为用户名输入框绑定一个离焦事件
				$("#username").blur(function () {
				    // 3.获得用户输入的数据
					//var username = this.value;
					var username = $(this).val();

					// 10.每次发送请求之前,先清空提示信息内容
					$("#usernameinfo").empty();
					 // 4.发送异步请求(请求参数的key,以后就是Servlet中getParameter方法的参数)
                    $.get({
                        url:"${pageContext.request.contextPath}/RegisterServlet",
                        data:{"username":username},
                        success:function(data){
                            // 5.判断
                            if("yes"==data){
                                // 6.说明用户名可用!将提示信息存储到一个临时变量
                                var temp = '<span class="label label-success">用户名可用</span>';
                                // 7.将提示信息显示在指定位置
                                $("#usernameinfo").append(temp);
                                // 12.解除注册按钮的禁用状态
                                $("#registerSubmit").prop("disabled",false);
                            }else if("no"==data){
                                // 8.说明用户名不可用!
                                var temp = '<span class="label label-danger">用户名不可用</span>';
                                // 9.将提示信息显示在指定位置
                                $("#usernameinfo").append(temp);
                                // 11.禁用注册按钮
                                $("#registerSubmit").prop("disabled",true);
                            }
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            // 只要代码能执行到这,说明服务器端出问题了给出提示信息!
                            var temp = '<span class="label label-danger">服务器端内部出错,请稍后再进行该功能的尝试!</span>';
                            // 将提示信息显示在指定位置
                            $("#usernameinfo").append(temp);
                            // 禁用注册按钮
                            $("#registerSubmit").prop("disabled",true);
                        },
                        dataType:"text"
                    });
                });
            });
		</script>
@WebServlet(name = "RegisterServlet", urlPatterns = "/RegisterServlet")
public class RegisterServlet extends HttpServlet {

    /**
     * 用户名校验(异步方式)
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
            IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        // 获得请求参数username
        String username = request.getParameter("username");
        System.out.println(username);
        // 调用service层用户名校验的方法(条件查询)
        UserService service = new UserService();
        User checkUser = service.checkUserName(username);

        // 服务器内部异常了(模拟断电!)
        int i = 1/0;

        // 非空判断
        if(checkUser!=null){
            // 说明数据库已经存在这个用户(名),给出用户名不可用的提示
            response.getWriter().write("no");
        }else{
            // 说明数据库已经存在这个用户(名),给出用户名不可用的提示
            response.getWriter().write("yes");
        }
    }
public class UserService {

    public User checkUserName(String username) {
        UserDao dao = new UserDao();
        return dao.checkUserName(username);
    }
}
public class UserDao {
    public User checkUserName(String username) {
        try {
            //1.获得JBDCTemplate
            JdbcTemplate template = new JdbcTemplate(DRUIDUtils.getDataSource());
            //2.编写SQL语句
            String sql = "select * from user where username=?";
            //3.设置实际参数
            Object[] params = {username};
            //4.执行查询操作(查询的一条记录封装成一个对象!)
            User checkUser = template.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), params);
            //发现当查询的result为空时,size赋值为0,并抛出EmptyResultDataAccessException异常
            return checkUser;
        }catch (Exception e){
            return null;
        }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过 AJAX 技术来实现在注册检查用户名是否重复。首先,在前端页面上,当用户输入用户名后,触发一个 AJAX 请求,将用户名发送到后端进行检查。后端可以通过查询数据库来判断用户名是否已经存在,然后将判断结果返回给前端。如果用户名已经存在,则前端可以提示用户重新输入用户名;如果用户名不存在,则可以让用户继续填写其他信息。具体实现可以参考以下步骤: 1. 在前端页面上,添加一个文本框用于用户输入用户名,同添加一个按钮用于触发 AJAX 请求。 2. 给按钮添加一个点击事件,当用户点击按钮,触发 AJAX 请求。 3. 在 AJAX 请求中,将用户名发送到后端进行检查。 4. 后端接收到请求后,查询数据库,判断用户名是否存在。 5. 将判断结果返回给前端,前端根据结果提示用户或继续填写其他信息。 以下是一个简单的示例代码: 前端页面: ```html <input type="text" id="username"> <button onclick="checkUsername()">检查用户名</button> <div id="result"></div> <script> function checkUsername() { var username = document.getElementById("username").value; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var result = xhr.responseText; document.getElementById("result").innerHTML = result; } } xhr.open("GET", "/check_username?username=" + username, true); xhr.send(); } </script> ``` 后端代码: ```python from flask import Flask, request app = Flask(__name__) @app.route('/check_username') def check_username(): username = request.args.get('username') # 查询数据库,判断用户名是否存在 if username_exists(username): return "用户名已存在" else: return "用户名可用" ``` 其中,`username_exists` 函数用于查询数据库判断用户名是否存在。可以根据具体情况自行实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值