使用Ajax校验用户登录信息

最新推荐文章于 2022-08-08 19:05:07 发布

qq_44983364

最新推荐文章于 2022-08-08 19:05:07 发布

阅读量185

点赞数

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

本文链接：https://blog.csdn.net/qq_44983364/article/details/105143134

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

login.jsp

<%--
  Created by IntelliJ IDEA.
  User: wx
  Date: 2020/3/27
  Time: 11:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <script>
        function a1() {
            $.post({//使用 AJAX 的 HTTP POST 请求从服务器加载数据
                url:"${pageContext.request.contextPath}/ajax/a3",//设置请求路径
                data:{"name":$("#name").val()},//获取输入的数据
                success:function (data) {//回调函数
                    if (data.toString() == "ok"){//信息核对
                        $("#userInfo").css("color","green");//核对成功
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);//给span标签赋值赋值
                }
            })
        }
        function a2() {
            $.post({//使用 AJAX 的 HTTP POST 请求从服务器加载数据
                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);//给span标签赋值赋值
                }
            })
        }
    </script>
</head>
<body>
<p>
    用户名：<input type="text" id="name" onblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
    密码：<input type="text" id="pwd" onblur="a2()">
    <span id="pwdInfo"></span>
</p>
</body>
</html>

Controller

@Controller
@RequestMapping(value = "/ajax")
public class ajaxController {
    @RequestMapping("/a3")
    public @ResponseBody String ajax3(String name,String pwd) throws IOException {
        String msg = "";
        if (name != null) {
            if ("admin".equals(name)) {
                msg = "ok";
            } else
                msg = "用户名有误";
        }
        if (pwd != null){
            if ("123456789".equals(pwd)){
                msg = "ok";
            }else {
                msg = "密码有误";
            }
        }
        return msg;
    }


}

qq_44983364

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Ajax校验用户登录信息

login.jsp<%-- Created by IntelliJ IDEA. User: wx Date: 2020/3/27 Time: 11:54 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;char...
复制链接

扫一扫