Spring Boot AJAX 用户名验证：前后端交互实现

本文将详细介绍如何使用 AJAX 在 Spring Boot 中实现一个简单的用户名验证功能。通过前端页面输入用户名，发送 AJAX 请求到后端，后端进行用户名是否存在判断，并将结果返回给前端，最终根据结果显示提示信息。

前端实现

首先，在前端页面中添加一个输入框和一个按钮，用户输入用户名后，点击按钮触发 AJAX 请求，将用户名发送到后端进行判断。

**HTML 代码：**html

接下来，在 JS 文件中编写 AJAX 请求函数，将用户名发送到后端进行判断。

**JS 代码：**javascriptfunction checkUsername() { var username = document.getElementById('username').value; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { if (this.responseText == 'true') { alert('Username already exists!'); } else { alert('Username is available!'); } } }; xmlhttp.open('GET', '/checkUsername?username=' + username, true); xmlhttp.send();}

后端实现

在后端 Controller 中，编写一个处理请求的方法，接收前端发送的用户名，进行判断并返回结果。这里使用一个简单的方法，将已存在的用户名保存在一个 List 中，每次判断时遍历 List，如果存在则返回 true，否则返回 false。

**Java 代码：**java@RestControllerpublic class UserController { private static List userList = new ArrayList();

@GetMapping('/checkUsername')    public boolean checkUsername(@RequestParam String username) {        if (userList.contains(username)) {            return true;        } else {            userList.add(username);            return false;        }    }}

工作流程

当用户输入用户名并点击按钮时，前端会发送一个 GET 请求到 /checkUsername，后端会接收到请求并进行处理，最后将结果返回给前端。前端根据返回的结果弹出相应的提示框。

总结

本文演示了如何在 Spring Boot 中使用 AJAX 实现简单的用户名验证功能。通过前后端交互，实现对用户输入的用户名进行实时判断，并提供相应的提示信息。这种方法简单易懂，易于扩展，适合各种 Web 应用开发场景。