技术解析

关于 springboot 的 ajax post 请求的问题
0
2021-06-01 15:10:12
idczone

我使用 m1 Macbook 想做个 demo 玩玩,但是请求后端就开始报错了,请大佬帮忙看看。 使用 Springboot 2.2.6.RELEASE+thymeleaf+mybatis-plus+mysql

前端 js:

    function login() {
        $("#loginForm").validate({
            submitHandler: function (form) {
                doLogin();
            }
        });
    }

    function doLogin() {
        g_showLoading();//显示 loading 动画

        var mobile = $("#mobile").val();
        var inputPassword = $("#password").val();
        alert("mobile:" + mobile + ",password:" + inputPassword);
        var salt = g_password_salt;
        var str = "" + salt.charAt(0) + salt.charAt(2) + inputPassword + salt.charAt(5) + salt.charAt(4);
        var password = md5(str);//md5 加密
        console.log(password);//这里打印不出密码

        var data = {}
        data.mobile = mobile;
        data.password = password;

        $.ajax({
            url: '/login/doLogin',
            type: 'POST',
            dataType: "json",
            cache: false,
            //async: true,
            data: JSON.parse(data),
            success: function (data) {
                layer.closeAll();
                if (data.code === 200) {
                    layer.msg("登录成功");
                } else {
                    layer.msg(data.message);
                }
                //return false;
            },
            error: function () {
                layer.closeAll();
            }
        });
    }

controller:

@Controller
@RequestMapping(value = "/login" , method = {RequestMethod.GET,RequestMethod.POST})
@Slf4j
public class LoginController {
    @RequestMapping(value = "/toLogin", method = RequestMethod.GET)
    public String toLogin() {
        return "login";
    }

    @RequestMapping(value = "/doLogin", method = RequestMethod.POST)
    //@PostM抗投诉服务器apping("/doLogin")
    @ResponseBody
    public RespBean doLogin(@RequestBody LoginVo loginVo) {
        log.info("{}", loginVo.toString());
        System.out.println(loginVo.toString());

        return null;
    }

}

在浏览器输入 http://localhost:8080/login/toLogin 可以访问到页面,然后点击登录调用 doLogin()方法,前后后端没有报错,但是后端的打印也不会打印到控制台;但是去掉 @RequestMapping(value = "/login" , method = {RequestMethod.GET,RequestMethod.POST})类上面这个 method 的话会报 405 post not support 。 并且使用 postman 调用接口都会报 404,排查了好久都没有解决。


加上 contentType: "application/json"
JSON.parse 换成 JSON.stringify()

加上之后后端的打印还是没有,chrome 里面 g_showLoading(); 以下的断点都不会进入 debug 。

JSON.parse

@RestController

忽略...

浏览器 cmd + alt + i 开开发工具,切到网络,看看请求的 content-type 和 payload 是什么

检查 cors 跨域

js 里肯定要改成 data: JSON.stringify(data)
而且你 LoginVo 定义是什么?

你可以自己用 postman post 到 /login/doLogin 先试试请求能不能到, 甚至可以把 LoginVo 类型改成 String 看能不能收到.
debug 总是一步步来的. 如果
1 String 能收到
2 LoginVo 能收到
那就是 js 端的问题了

去掉 @RequestBody

LoginVo 定义了两个 String 的字短,postman 中不管调用 get 还是 post api 都会报 404

js 已经改掉了

下面是 controller 和 postman 的截图,请问是 postman 配置的有问题吗?一直都是 404
https://i.loli.net/2021/05/26/pToMZReWvSJbju7.jpg?width=1748&height=512 https://i.loli.net/2021/05/26/HTf3dZQNBMeE9VP.jpg?width=1708&height=946

你这样子后端是拿不到参数的,你至少要指定 mobile 是 pathVariable 还是 requestBody, 是 string 还是 自定义类型.
但即使这样,后端的断点是会触发的,只不过你的 mobile 是 null

确实是 js 的问题...
```JavaScript
function doLogin(){
g_showLoading();//显示 loading 动画
var mobile = $("/> var inputPassword = $("/> var salt = g_password_salt;
var str = "" + salt.charAt(0) + salt.charAt(2) + inputPassword + salt.charAt(5) + salt.charAt(4);
var password = md5(str);//md5 加密
.......
}
```
JS 里面的 doLogin()调用的 g_showLoading()方法可能有问题,注释掉这个方法下面 js 的 debug 也进去了,后端也进去了,感谢。

但是 postman 不管是 get 还是 post 请求还是会报 404 page not found

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服