使用ajax验证用户登录

旧城等待， 2023-07-13 13:36 11阅读 0赞

## 使用ajax验证用户登录 ##

@RequestMapping("/a3")
    @ResponseBody
    public String ajax3(String name,String pwd){
        
        String msg="";
        if (name != null){
        
            if ("admin".equals(name)){
        
                msg="ok";
            }else {
        
                msg="用户名错误";
            }
        }if (pwd != null){
        
            if ("123456".equals(pwd)){
        
                msg="ok";
            }else {
        
                msg="密码错误";
            }
        }

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script src="${pageContext.request.contextPath}/statics/js/jquery-3.3.1.js"></script>
        <script>
            function a1() {
        
                $.post({
        
                    url:"${pageContext.request.contextPath}/ajax/a3",
                    data:{
        "name":$("#name")},
                    success:function (data) {
        
                        if (data.toString()=='ok'){
        
                            $('#userInfo').css("color","green");
                        } else{
        
                            $('#userInfo').css("color","red");
                        }
                        $("#userInfo").html(data);
                    }
                })
            }
            function a2() {
        
    
                $.post("${pageContext.request.contextPath}/ajax/a3",{
        "pwd":$("#pwd")},function (data) {
        
                    if (data.toString()=='ok'){
        
                        $('#pwdInfo').css("color","green");
                    } else{
        
                        $('#pwdInfo').css("color","red");
                    }
                    $("#pwdInfo").html(data);
                })
            }
        </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>

ajax获取的东西一般就三个url、data、 success这三个东西，我们通过function方法，获取数据，进行渲染  
@ResponseBody这个注解是json的，可以自动转为json格式