目录
一、前言 ：Content-Type 类型
(1)、 application/x-www-form-urlencoded 类型
（2）、application/json 类型
二、@PathVariable
二、@PathParam
三、@RequestBody
四、后端发送数据给前端
五、注意事项
一、前言 ：Content-Type 类型
(1)、 application/x-www-form-urlencoded 类型
请求参数以key-value的形式传输
（2）、application/json 类型
请求参数以JOSN串的形式传输
axios的Content-Type 类型 默认是application/json 类型
！！！前后端数据传输Content-Type 类型必须一致
二、@PathVariable
@PathVariable接收数据和Content-Type 类型无关。
@PathVariable接收的是请求路径中的参数
前端axios代码(get)：
function Vget(){
let str="发送数据V--get";
axios({
url:`http://localhost:8081/v/${str}`,
method:'get',
});
}后端代码(get):
(log.info是日志打印，就是sout)
@RequestMapping(value = "/v/{str}",method = RequestMethod.GET)
public String GetVtest(@PathVariable("str") String str){
log.info("请求接入v----GET____________________________________________________ ");
log.info("str:{}",str);
return "V-GET";
}post请求
前端(post):
function VPost(){
let str="发送数据V--post";
axios({
url:`http://localhost:8081/v/${str}`,
method:'post',
});
}
后端(post)
@RequestMapping(value = "/v/{str}",method = RequestMethod.POST)
public String PostVtest(@PathVariable("str") String str){
log.info("请求接入v----POST____________________________________________________ ");
log.info("str:{}",str);
return "V-POST";
}总结：
优点：无论是get还是post请求都是传递参数
缺点：不能传递带 “/” 的数据、不能传递对象、只能传递简单的数据
用途：可以在“修改”操作的时候传递user的id
二、@PathParam
@PathParam 接收数据的Content-Type 类型需要是application/x-www-form-urlencoded 类型
而axios中默认是application/json 类型。
需要引入qs (当然更改Content-Type也行，推荐直接使用qs)
引入qs (axios自带，不用而外下载)
import qs from 'qs'前端(get)
function Pget(){
let str="发送数据P--get";
let str2="get";
axios({
url:`http://localhost:8081/p`,
method:'get',
data:qs.stringify({str:str,str2:str2}) //get请求无法传输参数
});
}后端(get)
@RequestMapping(value = "/p",method = RequestMethod.GET)
public String GetPtest(@PathParam("str") String str,@PathParam("str2") String str2){
log.info("请求接入P----GET____________________________________________________ ");
log.info("str:{}",str);
return "P-GET";
}注意：axios的get请求是不能传递请求体中的参数的，所以后端接收时候str和str2都是 “null”
POST方式
才能传递请求体中的参数
前端(POST)
function Ppost(){
let str="发送/数/据P--post";
let str2="pos/t";
axios({
url:`http://localhost:8081/p`,
method:'post',
data:qs.stringify({str:str,str2:str2})
});
}后端（post）
@RequestMapping(value = "/p",method = RequestMethod.POST)
public String PostPtest(@PathParam("str") String str,@PathParam("str2") String str2){
log.info("请求接入P----POST ____________________________________________________");
log.info("str:{}",str);
return "P-POST";
}总结
优点：可以传递对象类型，参数内容带 “/” 也能传输
缺点：需要前后端协调清楚(稍微key不一样就不能接收到value)
在与后端交互过程qs会把Content-Type 改变成application/x-www-form-urlencoded类型
虽然浏览器请求头中依旧是application/json 类型，实际是改变了
三、@RequestBody
@RequestBody接收数据的Content-Type 类型需要是application/json 类型
且请求方式需要是POST类型
前端（POST）
function Rpost(){
let str="P";
let str2="post色地方";
//let str={sd:'sdw'};
axios({
url:'http://localhost:8081/r',
method:'post',
data:{
str:str,
str2:str2
}
});
}后端（POST）
@RequestMapping(value = "/r",method = RequestMethod.POST)
public String PostRtest(@RequestBody Map<Object,Object> map){
log.info("请求接入R----POST____________________________________________________ ");
log.info("map:{}",map);
return "sdjw";
}总结
优点：省事
缺点：后端类型不匹配错误 会报400、415 错误
四、后端发送数据给前端
介绍了后端接收前端数据，那也简单说一下后端发送数据给前端吧(其实我其他博客有说过)
发送的数据需要是json，所以要引入依赖
<dependency>
<groupId>com.alibaba.fastjson2</groupId>
<artifactId>fastjson2</artifactId>
<version>2.0.26</version>
</dependency>
后端
@ResponseBody
@RequestMapping(value = "/user",method = RequestMethod.GET)
public String User(){
Temp temp=new Temp(); //自定义的Temp类
temp.setStr("数据1");
temp.setStr2("数据2");
//JSON.toJSONString 把对象转化成JSON串
return JSON.toJSONString(temp);
}前端
function getUser(){
axios({
url:'http://localhost:8081/user'
}).then((data)=>{
console.log("接收到参数")
console.log(data.data);
}).catch((e)=>{
console.log("出现错误");
console.log(e.msg);
})
}五、注意事项
2、后端使用@RequestBody时候出现
前端axios出现
Request failed with status code 400 Request failed with status code 415
报错的时候检查
（1）axios请求体中data有没有写错(是不是写成了date)
（2）后端接收类型是否匹配（推荐直接使用map或者String）
（3）检查请求方式是不是POST
(4) vue有没有配置跨域(解决跨域可以看看其他博主的)
2、后端使用@PathParam 接收时候出现 null
（1）检查data是不是写错了（是不是写成了date）
（2）检查axios发送请求方式是不是POST
（3）检查前后端的参数key是不是相同
（4）检查data有没有使用qs
3、个人感想
每次写项目中前后端的交互总会出现一点小问题，每次都要暂停思路来检查这种小问题，
这是很让人浮躁的，今天花了一下午试错和查找解决办法，我上面提到的是最简单的解决办法了。
总之一句话：学习过程不要好高骛远因小失大文章来源：https://www.toymoban.com/news/detail-799837.html
发现错误欢迎在评论区指出文章来源地址https://www.toymoban.com/news/detail-799837.html
到了这里，关于@PathVariable、@PathParam、@RequestBody接收axios传递的请求参数；后端接收前端传递过来的参数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
