AJAX中Post请求验证用户名是否已存在

  • 实现一个案例:使用AJAX POST请求实现用户注册的时候,用户名是否可用。(验证用户名是否可以注册)实现步骤如下:
    • 在前端,用户输入用户名之后,失去焦点事件blur发生,然后发送AJAX POST请求,提交用户名
    • 在后端,接收到用户名,连接数据库,根据用户名去表中搜索
    • 如果用户名已存在
      • 后端响应消息:对不起,用户名已存在(在前端页面以红色字体展示)
    • 如果用户名不存在
      • 后端响应消息:用户名可以使用(在前端页面以绿色字体展示)

前端代码:

用到的是input的onblur属性,失去焦点就去发送ajax请求,与数据库中的用户名比对,存在,则返回用户名已存在;否则返回用户名合法。
我们这里点击注册按钮时候要先判断用户是否已存在,我们这里用的是span标签的结果来判断的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 实现一个案例:使用AJAX POST请求实现用户注册的时候,用户名是否可用。(验证用户名是否可以注册)
    实现步骤如下:
  ○ 在前端,用户输入用户名之后,失去焦点事件blur发生,然后发送AJAX POST请求,提交用户名
  ○ 在后端,接收到用户名,连接数据库,根据用户名去表中搜索
  ○ 如果用户名已存在
        后端响应消息:对不起,用户名已存在(在前端页面以红色字体展示)
    如果用户名不存在
        后端响应消息:用户名可以使用(在前端页面以绿色字体展示)-->

    <script>
        window.onload = function(){
            //1.获取ajax核心对象
            var xhr = new XMLHttpRequest();
            //判断username数据是否已存在
            document.getElementById("username").onblur = function(){
                //2.准备回调函数
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            document.getElementById("mySpan").innerHTML = xhr.responseText;
                        }else{
                            alert(xhr.status);
                        }
                    }
                }
                //3.打开通道
                xhr.open("Post","/ajax/ajaxrequest4",true);
                //4.发送请求
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                var username = document.getElementById("username").value;
                xhr.send("username=" + username);

            }

            //点击注册按钮
            document.getElementById("myBtn").onclick = function(){
                //这里是模拟注册
                if(document.getElementById("mySpan").innerText == "用户名已经存在了"){
                    alert("注册失败,用户名已存在")
                }else{
                    alert("注册成功")
                }
            }
        }
    </script>

    <input type="text" id="username">
    <span id="mySpan"></span><br>
    <input type="button" id="myBtn" value="注册">
</body>
</html>

后端代码:
我们这里直接用的jdbc操作的数据库,后端代码没什么可说的,就是查询语句。

@WebServlet("/ajaxrequest4")
public class AjaxRequest4Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        //接收请求
        String username = request.getParameter("username");
        //打布尔值标记 默认用户不存在
        boolean flag = false;
        //连接jdbc完成查询操作
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            //1.注册驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            //2.获取连接
             conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/powernode", "root", "2020");
            //3.获取预编译的数据库操作对象
            String sql = "select * from t_student where sname = ?";
             ps = conn.prepareStatement(sql);
             ps.setString(1,username);
            //4.执行sql语句
             rs = ps.executeQuery();
            //5.处理结果集
            if(rs.next()){
                //用户名已经存在了
                flag = true;
            }
            //6.关闭资源
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            if(rs != null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps != null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(conn != null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        //响应结果到浏览器
        PrintWriter out = response.getWriter();
        if(flag){
            //用户名存在
            out.print("<font color='red'>用户名已经存在了</font>");
        }else{
            out.print("<font color='green'>用户名可以使用呢</font>");
        }
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_53818758/article/details/130657963