springboot+vue 前端Json传参后端接收不到

自己遇见的几种情况,在这记录一下,因为当时查的时候情况太多了,还有可能是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")
      })
    },

后端

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

        return null;
    }

f12
springboot+vue 前端Json传参后端接收不到_第1张图片
可以试试这个,先用map来接收,具体注解是啥自己试一试吧
springboot+vue 前端Json传参后端接收不到_第2张图片

2–可以请求到

@RequestBody

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

        return null;
    }

在这里插入图片描述

二、引用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);
      })
    },
(单写一个js)
import request from "../utils/request";
//页码选择提交数据
export function load(params) {
  return request({
    url: '/api/load',
    method: 'post',
    params: params
  })
}

后端

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

        return null;
    }

这个接到的形式貌似不太一样,看情况办事吧,可以跟上边的对比一下
在这里插入图片描述

你可能感兴趣的:(springboot,vue,mvc,java)