1. 创建一个Spring Boot项目

首先,在IDE中创建一个Spring Boot项目。在这里,我们可以使用Spring Initializr来生成一个基本的Spring Boot项目。

  1. 添加前端页面

在src/main/resources/static目录下创建一个HTML文件,用于输入用户名和显示提示信息。以下是一个简单的HTML表单:

<!DOCTYPE html>
<html>
<head>
    <title>检查用户名是否存在</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>检查用户名是否存在</h1>
    <form>
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit" id="submit-btn">检查</button>
    </form>
    <div id="result"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/check-username.js"></script>
</body>
</html>

在这个页面中,我们定义了一个简单的表单,包含一个输入框和一个按钮。当用户输入用户名并点击按钮时,将触发一个AJAX请求,以检查用户名是否存在。请求结果将显示在一个div中。

  1. 添加AJAX请求

在src/main/resources/static/js目录下创建一个名为check-username.js的JavaScript文件,用于定义AJAX请求。以下是一个简单的AJAX请求:

$(document).ready(function() {
    $('#submit-btn').click(function(event) {
        event.preventDefault();
        var username = $('#username').val();
        $.ajax({
            url: "/check",
            type: "POST",
            data: username,
            success: function(data) {
                if (data) {
                    $('#result').html('用户名已存在。');
                } else {
                    $('#result').html('用户名可用。');
                }
            }
        });
    });
});

在这个JavaScript文件中,我们使用jQuery定义一个AJAX请求。当用户点击按钮时,将触发该请求,并向服务器发送用户名。服务器将返回true或false,表示该用户名是否已存在。请求结果将显示在页面上。

  1. 添加Controller

在src/main/java目录下创建一个名为CheckController的Java类,用于处理AJAX请求。以下是一个简单的Controller:

@RestController
public class CheckController {
    private static final String USERNAME = "admin";

    @PostMapping("/check")
    public boolean checkUsername(@RequestBody String username) {
        return USERNAME.equals(username);
    }
}

在这个Controller中,我们定义了一个名为checkUsername的方法,用于处理POST类型的/check请求。该方法将接收一个表示用户名的字符串,并将其与预定义的用户名进行比较。如果相同,则返回true,否则返回false。

  1. 启动Spring Boot应用程序

现在,我们已经完成了一个简单的Spring Boot应用程序,它可以检查表单中输入的用户名是否已存在。在IDE中启动该应用程序,并访问前端页面,即可开始使用。


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

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