基于spring boot不需要数据库使用AJAX编写程序设定一个用户名当在表单输入跟它一样时提示用户名已存在简单实现判断表单中的用户名是否存在启动Spring Boot应用程序并访问前端页面后输入用户名即可看到相应的结果
- 创建一个Spring Boot项目
首先,在IDE中创建一个Spring Boot项目。在这里,我们可以使用Spring Initializr来生成一个基本的Spring Boot项目。
- 添加前端页面
在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中。
- 添加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,表示该用户名是否已存在。请求结果将显示在页面上。
- 添加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。
- 启动Spring Boot应用程序
现在,我们已经完成了一个简单的Spring Boot应用程序,它可以检查表单中输入的用户名是否已存在。在IDE中启动该应用程序,并访问前端页面,即可开始使用。
原文地址: https://www.cveoy.top/t/topic/b3rc 著作权归作者所有。请勿转载和采集!