首先,需要在前端页面中添加一个输入框和一个按钮,用户输入用户名后,点击按钮触发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,后端会接收到请求并进行处理,最后将结果返回给前端。前端根据返回的结果弹出相应的提示框。

在spring boot中使用AJAX编写程序实现判断表单中的用户名是否存在

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

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