SpringMVC Ajax请求

142 阅读1分钟
  • 前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>

    // 如果将它们放在非它们的范围内,它们将以未定义形式出现。如果您真的想在$(document).ready(...)范围之外使用它们,
    // 则需要在外部声明它们。如:
    // var foo;
    /*
       $(document).ready(function (){
          foo=function(){}
      } 
      */
    let a1;
    let a2;
    $(document).ready(function (){
             a1=function(){
                $.post({
                    url:'${pageContext.request.contextPath}/login',
                    data:{'pwd':$('#pwd').val(),'username':$('#username').val()},
                    dataType:"json",
                    success:function (data) {
                        console.log(data.pwdmsg)
                        if(data.usermsg==="用户名正确"){
                            $('#userInfo').css('color','green')

                        }else{
                            $('#userInfo').css('color','red')
                        }
                        $('#userInfo').html(data.usermsg)
                        $('#pwdInfo').html('')
                    }
                })
            }
            a2=function () {
                $.post({
                    url:'${pageContext.request.contextPath}/login',
                    data:{'pwd':$('#pwd').val(),'username':$('#username').val()},
                    dataType:"json",
                    success:function (data) {
                        console.log(data.pwdmsg)
                        if(data.pwdmsg==="密码正确"){
                            $('#pwdInfo').css('color','green')

                        }else{
                            $('#pwdInfo').css('color','red')
                        }
                        $('#pwdInfo').html(data.pwdmsg)
                        $('#userInfo').html('')
                    }
                })
            }
    })
    </script>
</head>
<body>
<p>
用户名: <input type="text" id="username" onblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
密码: <input type="text" id="pwd" onblur="a2()" >
    <span id="pwdInfo"></span>
</p>
</body>
</html>

image.png

  • 后端代码
@RestController
public class AjaxController {
    @RequestMapping("/login")
    public String login(String username,String pwd){
        System.out.println("...."+username);
        System.out.println("...."+pwd);
        String usermsg = "";
        String pwdmsg = "";
        if ("admin".equals(username)) {
            usermsg="用户名正确";
        }
        else{
            usermsg="用户名错误";
        }

        if ("123456".equals(pwd)){
           pwdmsg="密码正确";
        }
        else{
            pwdmsg="密码错误";
        }
        return JSON.toJSONString(new Msg(usermsg,pwdmsg));
    }
}