Ajax实现最简单登录判断

最新推荐文章于 2022-04-08 16:41:46 发布

一笑奈何qwq

最新推荐文章于 2022-04-08 16:41:46 发布

阅读量615

点赞数 1

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_41727840/article/details/103815113

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

步骤：

1.编写对应处理的Controller，返回消息或字符串或者json格式的数据

2.编写Ajax请求

url ：Controller请求
data：键值对
success：回调函数

3.给Ajax绑定事件，可以为click、onblur、keyup等

具体实现代码：

前端：

<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.2.1.js"></script>
    <script>
        function a1() {
            $.ajax({
                url:"${pageContext.request.contextPath}/ajax/a3",

                //注意名称要和Controller中方法的参数名称一致，不然传不进去
                data:{"name":$('#username').val()},    

                success:function (data) {
                    if(data.toString()=="ok"){
                        $('#userInfo').css("color","green")
                    }else{
                        $('#userInfo').css("color","red")
                    }
                    $('#userInfo').html(data);
                }
            })
        }

        function a2() {
            $.ajax({
                url:"${pageContext.request.contextPath}/ajax/a3",
                data:{"pwd":$('#pwd').val()},
                success:function (data) {
                    if(data.toString()=="ok"){
                        $('#pwdInfo').css("color","green")
                    }else{
                        $('#pwdInfo').css("color","red")
                    }
                    $('#pwdInfo').html(data);
                }
            })
        }
    </script>
</head>
<body>

    用户名：
    <input type="text" id="username" onblur="a1()"/>
    <span id="userInfo"></span>
    <br>
    密码：
    <input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>

</body>

Controller：

@RequestMapping("/a3")
    @ResponseBody
    public String testLogin(String name,String pwd)  {
        String msg="";
        if(name!=null){
            if("admin".equals(name)){
               msg="ok";
            }else{
                msg="用户名有误";
            }
        }
        if(pwd!=null){
            if("123".equals(pwd)){
                msg="ok";
            }else{
                msg="密码有误";
            }
        }
        return msg;             //返回json格式数据
    }

执行结果：

一笑奈何qwq

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现最简单登录判断

步骤：1.编写对应处理的Controller，返回消息或字符串或者json格式的数据2.编写Ajax请求 url ：Controller请求 data：键值对 success：回调函数3.给Ajax绑定事件，可以为click、onblur、keyup等具体实现代码：前端：<head> <title>Title</t...
复制链接

扫一扫

专栏目录