首先,需要创建一个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>

然后,创建一个控制器类,用于处理请求和响应:

@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 "用户名可用";
      }
   }
}

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

接下来,创建一个User类,用于在前端页面中绑定表单数据:

public class User {
   private String username;

   public String getUsername() {
      return username;
   }

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

然后,创建一个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接口,将用户名作为参数传递给服务器。服务器处理请求后,返回一个字符串作为响应,该字符串在前端页面中显示为用户名是否已经存在的消息。

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

基于spring boot不连接数据库使用AJAX编写程序简单实现判断表单中的用户名是否存在启动Spring Boot应用程序并访问前端页面后输入用户名并点击检查按钮即可看到相应的结果

原文地址: https://www.cveoy.top/t/topic/b3p3 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录