springboot+vue 前端Json传参后端接收不到_后端接受不到vue前端数据怎么办

自己遇见的几种情况，在这记录一下，因为当时查的时候情况太多了，还有可能是request内部或者ajax的content-type的问题，就很多！！！
（1、请求方式：post、get）
（2、请求方式所写位置（反正我是遇到了）组件内部和单写一个js来暴露方法）
（3、request.js内部或者ajax的属性content-type）
（4、有可能你用的request.js内部人家是封装了一层的所以后边接到）
（5、@RequestParam与@RequestBody两个注解的使用）
（6、后边用map来接（下边第二张图可以看一下）)
（7、再就是上边各种情况的搭配)

…

按需索取！！

了解一下@RequestParam与@RequestBody两个注解，博主也写了content-type的问题

这个博主是ajax遇到的

request是封装axios的js文件

一、请求方式直接写在vue组件内部

1–请求不到

@RequestParam

前端
请求方式直接写在vue组件内部

import request from "../../../utils/request";
load(){
      var params = {}
      params.currentPage = this.currentPage;
      params.currentSize = this.currentSize;
      console.log("params111:",params)
      request.post("/api/load",{trainingJson: JSON.stringify(params)}).then(res =>{
        console.log("1111111")
      })
    },
1
2
3
4
5
6
7
8
9
10

后端

    //页码选择提交主要按钮
    @PostMapping("/load")
    public List<TreeSelect> pageAndSizeLoad(@RequestParam String trainingJson){

        return null;
    }
1
2
3
4
5
6

f12

可以试试这个，先用map来接收，具体注解是啥自己试一试吧

2–可以请求到

@RequestBody

 //页码选择提交主要按钮
    @PostMapping("/load")
    public List<TreeSelect> pageAndSizeLoad(@RequestBody String trainingJson){

        return null;
    }
1
2
3
4
5
6

二、引用js文件的方法

可以请求到

（@RequestParam）

（只测了这一种情况，当时能接到参数就没再试别的）
前端

（vue组件）
import {load} from "../../../api/load";
load(){
      var params = {}
      params.currentPage = this.currentPage;
      params.currentSize = this.currentSize;
      load({trainingJson: JSON.stringify(params)}).then(res =>{
        console.log(res);
      })
    },
1
2
3
4
5
6
7
8
9
10

（单写一个js）
import request from "../utils/request";
//页码选择提交数据
export function load(params) {
  return request({
    url: '/api/load',
    method: 'post',
    params: params
  })
}
1
2
3
4
5
6
7
8
9
10

后端

@PostMapping("/load")
    public List<TreeSelect> pageAndSizeLoad(@RequestParam String trainingJson){

        return null;
    }
1
2
3
4
5

这个接到的形式貌似不太一样，看情况办事吧，可以跟上边的对比一下