Ajax验证用户名是否可用

悬在半空

2024-04-20 帮助1人

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+8","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服务器,校验结果:

用户名在数据库存在：学新通

用户名在数据库不存在: 学新通

Ajax验证用户名是否可用功能实现成功！

这篇好文章是转载于：学新通技术网

Ajax验证用户名是否可用

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐