基于springboot使用AJAX编写程序实现判断表单中的用户名是否存在。完整代码

前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>判断用户名是否存在</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#username").blur(function () {
                var username = $("#username").val();
                $.ajax({
                    type: "POST",
                    url: "/checkUsername",
                    data: {"username": username},
                    dataType: "json",
                    success: function (data) {
                        if (data.code === 0) {
                            $("#msg").text("用户名已存在，请重新输入！");
                        } else {
                            $("#msg").text("");
                        }
                    },
                    error: function () {
                        alert("请求失败！");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>
        <span id="msg"></span><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

后端代码：

@RestController
public class UserController {
    @PostMapping("/checkUsername")
    public ResultData checkUsername(@RequestParam("username") String username) {
        // 在此处编写判断用户名是否存在的逻辑
        // 若用户名存在，则返回code=0，否则返回code=1
        if ("admin".equals(username)) {
            return new ResultData(0, "用户名已存在！");
        } else {
            return new ResultData(1, "用户名不存在！");
        }
    }
}

ResultData类：

public class ResultData {
    private int code;
    private String msg;

    public ResultData(int code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}

以上代码实现了一个简单的判断用户名是否存在的功能。页面中的用户名输入框失去焦点时，会向后端发送一个POST请求，如果用户名已存在，则会在页面上显示“用户名已存在，请重新输入！”提示信息。

基于springboot使用AJAX编写程序实现判断表单中的用户名是否存在。完整代码