关于axios传参方式get/post以及后端Springboot使用@RequestBody/@RequestParam接参数时踩的坑

于 2024-07-31 16:03:05 发布
阅读量574 收藏 5
点赞数 15
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78755150/article/details/140823885
版权

今天在使用axios向后端传数据时后端突然接不到数据了，在网上搜索了一下关于axios的不同请求方式的传参方式，排查了一上午问题终于找到问题出在哪了

首先是请求方式，之前登录我使用的get请求方式，一直是把数据封装在了params里面，然后在后端接收数据时使用的笨的方法用参数一个一个去接，但是参数多的时候就显得很2。改了一下前端用post请求参数放在请求体里边，后端使用@RequestBody去接：

优化之前：↓

优化之后：↓

这里我选择使用了一个实体类来接收传过来的参数，方便维护

注意：前端要传的参数类型和名字一定要与后端接收参数的类型和名字保持一致！，否则接不到数据

get请求由于没有请求体，params参数都会拼接到url后面

在post请求中可以使用data传参，他会把参数放到请求体里边进行传参。也可以使用params传参，参数会拼接到url后面

如果前端使用的是params传参方式，那么后端controller层接收参数时应使用@RequestParam注解来对应前端的参数

番茄西红柿炒蛋
关注
  • 15
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3通过axios发起get、post请求以及对应的springboot后端接收方式
m0_67401499的博客
07-28 2459
这周在做一个小型的前后端分离的会议系统，前端使用的是Vue3，后端使用的是Springboot。原本以为前后端交互很简单，直接发送数据就可以了，没想到遇到了很多问题，具体说来就是1、get和post请求应该如何向后端传递参数；2、前端请求体中参数的存储有哪几种格式，对于不同的存储方式后端应该如何去接收；3、http报文头的到底有什么作用；4、字符集的编码应该如何指定；接下来就让我们逐个来解决这些问题吧！注意如果发送get请求，直接传入普通的js对象即可，axios会自动处理使得后端可以通过。...
关于axios配置请求头及使用@RequestBody和@RequestParam的感悟
weixin_44119790的博客
12-27 1237
最近做了一个前端是vue+后台springboot的项目，采用前后端分离的方式，用json传值。 当我后端采用 @PostMapping(value = "/getSortWithFiveNews") public Result getSortWithFiveNews(@RequestParam("sid")Long sid){ return sortService.get...
axios post提交数据@RequestParam后端接收不到
衣乌安、随笔
09-08 3705
首先要确定表单的提交类型 　　　在main.js中配置全局默认headers: axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 确保表单提交方式为：application/x-www-form-urlencoded 然后确定数据格式应该为表单数据 　　　建议用node的...
axios（get、post） 请求中的@requestBody @requestParams 以及headers的使用，请求拦截器、响应拦截器的封装
01-03
axios post 请求传递request-body request-query headers（get 或者不直接使用get、post使用axios 道理方法都类似，注意：get没有请求体，如果要用get方法，后端就不能用@requestBody来接收，相应可以改为@requestParams接收） self.$axios.post('/api/ui/ombs/login', {//request-body password: self.ruleForm.password, username: self.ruleForm.username }, {//request-que
axios传参
qq_36262295的博客
12-16 173
get请求传参 axios.get('/user?id=12345&name=user') .then(function (res) { console.log(res); }).catch(function (err) { console.log(err); }); axios.get('/user', { //params参数必写 , 如果没有参数传{}也可以 params: { id: 12345， name: user }
Axios传递参数后端用@RequestParam
sungancd的博客
11-18 4479
Axios请求头中的Content-Type常见的有3种： Content-Type:application/json： 请求体中的数据会以json字符串的形式发送到后端 Content-Type:application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端 Content-Type:multipart/form-data：它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。 Axios默认的Conte
axios的传参方式
weixin_44152684的博客
08-08 5783
或者直接把参数拼接在地址后面。delete和get一样。注解，不然接收不到参数。还有一种情况是后端用。put和post一样。
springboot+axios传参问题
weixin_41670405的博客
04-16 799
res.data：获取后台响应的数据。前端传过去的参数名称一定要与后台接收的参数名称一致。后台代码跟第一种方式传参代码一致。在使用axios之前需要引入axios.js文件。访问之后你会发现报错400。value：参数名称要跟前端的传来参数名称一致。第一种方式：就是将后台接收参数方式使用。params：固定写死的否则参数无效。RequestParam注解接收参数。@RequestBody接收实体类。第二种方式：改变前端传参写法。
Axios的传参方式
啵啵的女孩
11-11 463
Axios的传参方式。
axios的传参问题
Forrit的博客
11-18 2122
1.axios.get: 字符串拼接法： 前端传送数据： data: { message:'' //当然，message也可以为其他类型的变量,如：int，array }, axios.get("/haha?message="+this.message).then((response)=>{ console.log("发送成功"); },
axios传参方式
最新发布
weixin_45392204的博客
05-14 345
axios的各种传参方式
vue.js学习之 跨域请求代理与axios传参
weixin_34341229的博客
12-06 173
vue.js学习之 跨域请求代理与axios传参 一：跨域请求代理 1：打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}，改为这样： proxyTable: { '/api': { target: 'http://121.41.130.58:...
前端(Axios)如何传数组到后端
分享自己的经验、IT技术，愿在博客中遇见更好的自己
01-16 1420
当我们想要前端实现批量操作功能时（例如：勾选多个想要内容，再一键删除），可以把想要删除的内容的唯一标识（例如：ID）保存在一个数组中，接着通过Axios把此数组发送到后端，后端控制层用List集合接收，再进行实际的删除操作，最后达到我们想要的效果，那我们该怎么实现呢？
axios （用法、传参等）
频繁记录
09-22 1178
axios （用法、传参等）
axios传参的语法
qq_20623665的博客
12-19 1679
请求方式POST向服务器新增数据GET从服务器获取数据DELETE删除服务器上的数据PUT更新服务器上的数据(侧重于完整更新:例如更新用户的完整信息)PATCH更新服务器上的数据(侧重于部分更新:例如只更新用户的手机号 )getpostrestfu1接口规范:（下例是我二次封装了，大体简写方式是相同的，传参解构了，方便阅读）查询get : 请求行传参新增post : 请求体传参局部更新ptch 请求体传参。
vue中axios发送post请求，后端（@RequestParam）接不到参数
06-13
可能是因为你没有正确地设置请求头或请求体。首先，确保你在发送post请求时，设置了请求头的 Content-Type 为 application/json，这样后端才能正确解析请求体中的参数。其次，确保你在请求体中正确地设置了参数，例如： ``` axios.post('/api/xxx', { param1: 'value1', param2: 'value2' }).then(response => { // handle response }).catch(error => { // handle error }) ``` 在后端接收参数时，使用 @RequestBody 注解而不是 @RequestParam 注解，例如： ``` @PostMapping("/api/xxx") public void handleRequest(@RequestBody Map<String, String> params) { String param1 = params.get("param1"); String param2 = params.get("param2"); // handle params } ``` 注意，这里使用了 Map<String, String> 来接收参数，因为请求体中传递的参数是一个 key-value 对象。如果你需要传递复杂的数据结构，可以使用相应的 Java 对象来接收参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值