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

Goodbye ideal

于 2023-05-13 15:33:18 发布

阅读量418

点赞数 1

分类专栏： JavaWeb 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_53818758/article/details/130657963

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现一个案例：使用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>");
        }
    }
}

Goodbye ideal

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AJAX中Post请求验证用户名是否已存在

用到的是input的onblur属性，失去焦点就去发送ajax请求，与数据库中的用户名比对，存在，则返回用户名已存在；否则返回用户名合法。我们这里点击注册按钮时候要先判断用户是否已存在，我们这里用的是span标签的结果来判断的。我们这里直接用的jdbc操作的数据库，后端代码没什么可说的，就是查询语句。
复制链接

扫一扫