码迷,mamicode.com
首页 > Web开发 > 详细

使用ajax验证信息

时间:2020-01-25 23:37:30      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:red   context   密码   用户   mamicode   lse   ajax验证   ima   image   

使用ajax验证信息

  1. 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;
    }
  2. 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>
  3. 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>
  4. 页面效果

    技术图片

使用ajax验证信息

标签:red   context   密码   用户   mamicode   lse   ajax验证   ima   image   

原文地址:https://www.cnblogs.com/pinked/p/12233579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!