在spring boot中使用AJAX编写程序实现判断表单中的用户名是否存在
首先,需要在前端页面中添加一个输入框和一个按钮,用户输入用户名后,点击按钮触发AJAX请求,将用户名发送到后端进行判断。
HTML代码:
<input type="text" id="username" name="username">
<button onclick="checkUsername()">Check Username</button>
接下来,在js文件中编写AJAX请求函数,将用户名发送到后端进行判断。
JS代码:
function 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代码:
@RestController
public class UserController {
private static List<String> userList = new ArrayList<String>();
@GetMapping("/checkUsername")
public boolean checkUsername(@RequestParam String username) {
if (userList.contains(username)) {
return true;
} else {
userList.add(username);
return false;
}
}
}
这样,当用户输入用户名并点击按钮时,前端会发送一个GET请求到/checkUsername,后端会接收到请求并进行处理,最后将结果返回给前端。前端根据返回的结果弹出相应的提示框。
原文地址: https://www.cveoy.top/t/topic/b3d4 著作权归作者所有。请勿转载和采集!