Spring Boot 无数据库 AJAX 用户名校验：简单实现

本文介绍如何使用 Spring Boot 和 AJAX 技术，不连接数据库，实现一个简单的用户名校验功能。用户在前端页面输入用户名后，点击“检查”按钮，程序会通过 AJAX 请求判断用户名是否已存在，并将结果反馈给用户。

1. 创建 Spring Boot 项目并添加依赖

首先，需要创建一个 Spring Boot 项目，并添加必要的依赖项：

<dependencies>
   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
   </dependency>
</dependencies>

2. 创建控制器类

创建一个控制器类，用于处理请求和响应：

@Controller
public class UserController {
   @GetMapping("/")
   public String index(Model model) {
      model.addAttribute("user", new User());
      return "index";
   }

   @PostMapping("/checkUser")
   @ResponseBody
   public String checkUser(@RequestParam String username) {
      if (username.equals("admin")) {
         return "用户名已存在";
      } else {
         return "用户名可用";
      }
   }
}

在这个控制器类中，我们定义了两个方法：index 和 checkUser。index 方法用于返回前端页面，并将一个空的 User 对象添加到模型中。checkUser 方法用于处理 /checkUser 请求，并根据用户名是否为 'admin' 返回不同的响应。

3. 创建 `User` 类

创建一个 User 类，用于在前端页面中绑定表单数据：

public class User {
   private String username;

   public String getUsername() {
      return username;
   }

   public void setUsername(String username) {
      this.username = username;
   }
}

4. 创建 Thymeleaf 模板

创建一个 Thymeleaf 模板，用于显示前端页面和处理表单提交：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8">
      <title>用户注册</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <h1>用户注册</h1>
      <form th:object="${user}" method="post" action="/checkUser">
         <label>用户名：</label>
         <input type="text" th:field="*{username}">
         <button type="submit" id="checkBtn">检查</button>
      </form>
      <div id="result"></div>
      <script>
         $(document).ready(function() {
            $('#checkBtn').click(function(e) {
               e.preventDefault();
               var username = $('input[name="username"]').val();
               $.ajax({
                  url: '/checkUser',
                  type: 'POST',
                  data: {
                     username: username
                  },
                  success: function(data) {
                     $('#result').text(data);
                  },
                  error: function(xhr, status, error) {
                     console.log(xhr.responseText);
                  }
               });
            });
         });
      </script>
   </body>
</html>

在这个模板中，我们使用 Thymeleaf 的表单绑定功能将 User 对象中的 username 属性绑定到表单中的用户名输入框。在提交表单时，使用 jQuery 发送一个 AJAX 请求到 /checkUser 接口，将用户名作为参数传递给服务器。服务器处理请求后，返回一个字符串作为响应，该字符串在前端页面中显示为用户名是否已经存在的消息。

5. 运行应用程序

最后，运行 Spring Boot 应用程序，访问 http://localhost:8080/，输入用户名并点击“检查”按钮，即可看到相应的结果。

总结

本文介绍了如何使用 Spring Boot 和 AJAX 技术，不连接数据库，实现一个简单的用户名校验功能。这个示例展示了如何使用 Spring Boot 处理 AJAX 请求，并使用 Thymeleaf 模板进行页面渲染和表单绑定。希望这篇文章能帮助你了解 Spring Boot 和 AJAX 技术的基本应用。

Spring Boot 无数据库 AJAX 用户名校验：简单实现