使用ajax验证信息

Posted 2021-03-13 pinked

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ajax验证信息相关的知识，希望对你有一定的参考价值。

使用ajax验证信息

controller

@RequestMapping("/check")
public String check(String username, String password) {
    String msg = "";
    if (username != null) {
        if ("admin".equals(username)) {
            msg = "ok";
        } else {
            msg = "用户名错误";
        }
    }
    if (password != null) {
        if ("123456".equals(password)) {
            msg = "ok";
        } else {
            msg = "密码错误";
        }
    }
    return msg;
}

username,password输入框和提示

<p>
    用户名:<input type="text" id="username" onblur="checkid()">
    <span id="userInfo"></span>
</p>
<p>
    密码:<input type="password" id="password" onblur="checkpwd()">
    <span id="pwdInfo"></span>
</p>

checkid和checkpwd

<script>
    function checkid() {
        $.post({
            url: "${pageContext.request.contextPath}/check",
            data: {\'username\': $("#username").val()},
            success: function (data) {
                if (data.toString() === \'ok\') {
                    $("#userInfo").css("color", "green");
                } else {
                    $("#userInfo").css("color", "red");
                }
                $("#userInfo").html(data);
            }
        })
    }

    function checkpwd() {
        $.post({
            url: "${pageContext.request.contextPath}/check",
            data: {\'password\': $("#password").val()},
            success: function (data) {
                if (data.toString() === \'ok\') {
                    $("#pwdInfo").css("color", "green");
                } else {
                    $("#pwdInfo").css("color", "red");
                }
                $("#pwdInfo").html(data);
            }
        })
    }
</script>

页面效果

以上是关于使用ajax验证信息的主要内容，如果未能解决你的问题，请参考以下文章