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