#头条创作挑战赛#

12.3 案例

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在

12.3.1 分析

• 前端完成的逻辑
• 给用户名输入框绑定光标失去焦点事件 onblur
• 发送 ajax请求，携带username参数
• 处理响应：是否显示提示信息
• 后端完成的逻辑
• 接收用户名
• 调用service查询User。此案例是为了演示前后端异步交互，所以此处不做业务逻辑处理，直接将返回结果定为 true
• 返回标记

整体流程如下：

12.3.2 后端实现

 package web.servlet;
 /**
  * @Author 晨默
  * @Date 2022/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 {
     @Override
     protected 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);
     }
 
     @Override
     protected 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';
                 }

综上所述，所有代码为：

 
 
 
     
     
     
 
 
 
 
     
         
欢迎注册
         已有帐号？ 登录
     
     
 
 
 
 
 

效果如下：