「JavaWeb 22-3」Ajax-案例
12.3 案例
需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在
12.3.1 分析
前端完成的逻辑给用户名输入框绑定光标失去焦点事件 onblur发送 ajax请求，携带username参数处理响应：是否显示提示信息后端完成的逻辑接收用户名调用service查询User。此案例是为了演示前后端异步交互，所以此处不做业务逻辑处理，直接将返回结果定为 true返回标记整体流程如下：
12.3.2 后端实现
package web.servlet;/*** @Author 晨默* @Date2022/9/12 22:51*/import javax.servlet.*;import javax.servlet.http.*;import javax.servlet.annotation.*;import java.io.IOException;@WebServlet(name = "SelectUserServlet", value = "/SelectUserServlet")public class SelectUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 1. 接受用户名String username = request.getParameter("username");// 2. 调用service查询user对象，直接给flag赋值为true，表明用户名占用boolean flag = true;// 3. 响应标记response.getWriter().write(""+flag);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}}12.3.3 前端实现
在 register.html 页面的 body 结束标签前编写 script 标签，在该标签中实现如下逻辑
1. 第一步：给用户名输入框绑定光标失去焦点事件onblur
// 1. 给用户输入框绑定 失去焦点事件document.getElementById("username").onblur = function(){}2. 第二步：发送ajax**请求，携带username参数**
在 第一步 绑定的匿名函数中书写发送 ajax 请求的代码
// 2.1 创建核心对象let xhttp;if(window.XMLHttpRequest){xhttp = new XMLHttpRequest();}else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// 2.2 发送请求xhttp.open("GET","http://localhost:5050/AjaxDemo_war/SelectUserServlet?username="+username);xhttp.send();// 2.3 获取响应xhttp.onreadystatechange = function(){if(this.readyState === 4 && this.status === 200){}}由于发送的是 GET 请求，所以需要在 URL 后拼接从输入框获取的用户名数据。而在 第一步 绑定的匿名函数中通过以下代码可以获取用户名数据
// 获取用户名的值var username = this.value; // this:给谁绑定的事件，this就代表谁而携带数据需要将 URL 修改为：
xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);3. 第三步：处理响应：是否显示提示信息
当 this.readyState == 4 && this.status == 200 条件满足时，说明已经成功响应数据了。
此时需要判断响应的数据是否是 "true" 字符串，如果是说明用户名已经占用给出错误提示；如果不是说明用户名未被占用清除错误提示。代码如下
// 判断if(this.responseText === "true"){// 用户名存在，显示提示信息document.getElementById("username_err").style.display = ;}else{// 用户名不存在，清除提示信息document.getElementById("username_err").style.display = none;}综上所述，所有代码为：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>欢迎注册</title><link href="css/register.css" rel="stylesheet"></head><body><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span> <a href="login.html">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password" id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>验证码</td><td class="inputs"><input name="checkCode" type="text" id="checkCode"><img src="imgs/a.jpg"><a href="#" id="changeImg">看不清？</a></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clear"></form></div><script><!-- 1. 给用户名输入框绑定 失去焦点事件 -->document.getElementById("username").onblur =function(){// 2. 发送ajax请求// 获取用户名的值const username = this.value;// 2.1 创建核心对象let xhttp;if(window.XMLHttpRequest){xhttp = newXMLHttpRequest();}else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// 2.2 发送请求xhttp.open("GET","http://localhost:5050/AjaxDemo_war/SelectUserServlet?username="+username);xhttp.send();// 2.3 获取响应xhttp.onreadystatechange = function(){if(this.readyState === 4 && this.status === 200){// alert(this.responseText);// 判断if(this.responseText === "true"){// 用户名存在，显示提示信息document.getElementById("username_err").style.display = ;}else{// 用户名不存在，清除提示信息document.getElementById("username_err").style.display = none;}}}}</script></body></html>效果如下：
版权申明
本文系作者 @河马 原创发布在河马博客站点。未经许可，禁止转载。
暂无评论数据