Ajax验证用户名是否可用
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标签中。
-
-
<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.*;
-
-
-
public class Ajax extends HttpServlet {
-
-
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验证用户名是否可用功能实现成功!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgchjgf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01