Ajax验证用户名是否可用

悬在半空

已于 2022-12-13 20:42:15 修改

阅读量969

点赞数

文章标签：服务器 ajax mysql java servlet

于 2022-12-04 13:36:26 首次发布

本文链接：https://blog.csdn.net/m0_62454521/article/details/128171491

版权

1.在做项目的时候，或多或少都会用到ajax来实现注册登录的校验，例如，当你注册时，你输入一个用户名，就会提示你，用户名可用，或者，用户名已被注册，等等，就像下图这种。

2.发送 Ajax 请求的五个步骤：

（1）创建异步对象。即 XMLHttpRequest 对象。

（2）设置请求的参数。包括：请求的方法、请求的url。

（3）发送请求。

（4）注册事件。 onreadystatechange事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

（5）获取返回的数据。

readyState状态值的理解：

对AJAX异步请求的理解：

3.在Body里面设置一个表框标签和一个span标签(span标签不会独占一行),设置完打开浏览器查看页面初始效果:

4.设置Ajax请求方式,如果readystate==4则代表请求已完成，且响应已就绪。status==200代表"ok"。onblur()是失去焦点而触发的事件。发送post请求,请求路径为"/ajax1",响应回来的文本信息会返回到span标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Post请求验证用户名是否可用</title>
</head>
<body>
<script>
    window.onload=function () {
        document.getElementById("username").onblur=function () {
            //console.log("正在发送Ajax请求验证用户名...")
            //1.
            var xhr=new XMLHttpRequest()
            //2.
            xhr.onreadystatechange=function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("tipMsg").innerHTML=this.responseText
                    }else {
                        alert(this.status)
                    }
                }
            }
            //3.
            xhr.open("POST","/ajax1",true)
            //4.
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            //获取表单数据
            var username=document.getElementById("username").value
            //5.
            xhr.send("uname="+username)
        }
    }
</script>
用户名:<input type="text" id="username">
<span id="tipMsg"></span>
</body>
</html>

5.先创建一张数据库表,以便后面创建JDBC连接数据库使用。

页面总体类图:

创建lib目录,把本地的mysql8.0jar包粘贴进目录,并把jar包添加进项目库。

6.创建ajax类,设置注解路径为"/ajax1",用来连接数据库并返回结果

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;

@WebServlet("/ajax1")
public class Ajax extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取用户名
        String uname = request.getParameter("uname");
        //打布尔标记
        boolean flag=false;
        //连接数据库验证用户名是否存在
        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/test?useUnicode=true&characterEncoding=UTF-8&userSSL=false&serverTimezone=GMT%2B8","root","123456");
            //3.获取预编译的数据库操作对象
            String sql="select id,username from user where username=?";
            ps=conn.prepareStatement(sql);
            ps.setString(1,uname);
            //4.执行SQL语句
            rs=ps.executeQuery();
            //5.处理结果集
            if (rs.next()) {
                //用户名已存在
                flag=true;
            }

        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            //6.释放资源
            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();
                }
            }
        }
        //响应结果到浏览器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        if (flag) {
            out.print("<font color='red'>用户名已存在</font>");
        }else {
            out.print("<font color='green'>用户名可以使用</font>");
        }
    }
}

7.启动Tomcat8.5.83服务器,校验结果:

用户名在数据库存在：