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

最新推荐文章于 2023-08-07 15:50:58 发布

原创最新推荐文章于 2023-08-07 15:50:58 发布 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#mvc #java

springboot 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

这篇博客详细记录了在前后端交互中遇到的若干问题，包括请求方式（POST、GET）、请求位置、Content-Type设置、封装的request.js与Ajax的使用，以及@RequestParam和@RequestBody注解的区别。作者通过实例展示了在Vue组件内部直接写请求和引用外部js文件请求的不同情况，并分析了如何正确接收参数。对于开发者来说，理解这些细节对于解决请求失败的问题至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己遇见的几种情况，在这记录一下，因为当时查的时候情况太多了，还有可能是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<TreeSelect> pageAndSizeLoad(@RequestParam String trainingJson){

        return null;
    }

f12
在这里插入图片描述
可以试试这个，先用map来接收，具体注解是啥自己试一试吧

2–可以请求到

@RequestBody

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

        return null;
    }

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