Vue中使用axios.post请求传参后端拿不到值问题

最新推荐文章于 2024-12-17 07:24:48 发布
最新推荐文章于 2024-12-17 07:24:48 发布
阅读量815 收藏 4
点赞数
CC 4.0 BY-SA版权
文章标签： Vue中使用axios.opst请求传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44743242/article/details/93181965
博客主要探讨Vue中使用axios.post请求传值的问题。前端以JSON格式传值，后端用常规方式拿不到值，使用@RequestBody注解适合传对象，传单个值不适用。传多个值时，可安装并引用qs来解决传值问题。

问题一
前端代码
在这里插入图片描述
后端代码
在这里插入图片描述
这样传值可以看到浏览器是以JSON格式传值，但是后端是拿不到值的拿到的值位null

所以可以在方法中加入@requestBody注解如：
在这里插入图片描述但是拿到的值并不是想象的那样，前端是将数据打包成Json格式，所以这样写拿不到相应的值，只有将name 和password打包成一个对象，所以用@RequestBody不适合传单个值，更适合传一个对象

当你想传多个值如：
在这里插入图片描述
就需要在后端修改了
先安装qs: npm install qs --save-dev
然后在你发送请求的组件中导入qs:
在这里插入图片描述
引用qs:
在这里插入图片描述这样问题就解决了

总结：@RequestBody拿到的是一个对象，使用qs则是拿到单个值

Vue 项目中的 Axios 请求与参数传递问题解析
私聊前往站内信：https://i.youkuaiyun.com/#/msg/chat/weixin_44976692
09-09 2万+
在 Vue 项目中使用axios发起 HTTP 请求时，参数传递和接口响应是最容易出现问题的两个环节。通过正确的参数传递方式、与后端保持良好的沟通、以及对接口响应进行全面的检查，我们能够快速定位问题并进行修复。同时，合理封装请求逻辑和优化错误处理，不仅能够提升代码的可维护性，还能显著提高用户体验。希望本文的解析能够帮助你更好地理解并解决 Vue 项目中的 Axios 请求问题。
解决Vue axios post请求,后台获取不到数据的问题方法
10-18
今天小编就为大家分享一篇解决Vue axios post请求,后台获取不到数据的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
axios传的值 后端取不到
A9541170的博客
11-19 724
问题描述 springboot后端取不到axios传来的值，controller方法执行了，但是打印的username和password是null 前端 后端 后台输出 null 分析思路 打开控制台 经过一番百度发现 axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据 发现 以往的表单类型 formData 变成了Request Payload Contentype也变成了application/json而不是application/x-www-form-urlencoded
解决axios post 后端无法接收数据的问题
12-13
在后端 允许跨域的情况下，axios post 将数据传到后端，但是后端无法接收，始终为空 请求能正常到达后端，那么肯定传数据的地方的问题了 所以这里headers设置为 headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'} 另外transformRequest函数 transformRequest: [function (data) { // 对 data 进行任意转换处理 let ret = '';
使用vueAdmin-template,java后台不能接收到参数
qq_15674631的博客
07-28 2799
今天自己写了个界面，但是发现基于springmvc和ssm框架的后台并不能接受vue中的request请求， 这个模板里面使用了axios，并且在之上封装了一层，axios是基于requestBody的，在后台试了一下，加上@RequestBody就可以收到参数，然而，然而这个后台是提供给多个界面的，明显不会去添加这些注释，我也犯懒，不可能为每一个接口全部加上。想了一下，其实就是因为一个是基于...
Vue中使用axios post方法传参后台接收不到参数
ZKY的博客
05-25 2049
post请求不像get请求一样，get请求传参是在url后边以&去拼接上的，而post请求时在请求体中的，不会默认去拼接，这就导致。post传递参数失败 ，后台无法获取传递的参数 注：一定先import导入之后才能使用 var params = { bankName: ”“, bankNameAll: ”“, } axios.post(urls, params).then(res=>{ //这里的params是我向后台传递的参数 //这时候发现后台无法接收到值
axios 发 post 请求，后端接收不到参数的解决方案
最新发布
2401_89224664的博客
12-17 1064
------------------------------- (完)---------------------------------------------------------------------- (完)-----------------------------------------------------------------(正文完)------------------------------------既然 axios 源码中有那么一段【很关键】的代码，那么，我们也可以通过修改。
Vue中使用axios（POST请求）调用后端接口时，后端接口接收不到前端参数的问题
L_WalkingPig的博客
02-25 8758
最近在学习Vue，期间遇到个问题就是前端页面使用axios调用接口将页面数据存储到数据库中时，使用POST请求时后端Debug不出前端的参数，导致前端触发调用后端接口时后端会一直报错，之前前端这样写的： （接口调用方法单独提出来写在marketmanager的insertMarketManagerFill方法中，这边import引入后直接用就行了） 但是问题来了，data中的各参数前端或者...
vue中axios发送post请求，后端（@RequestParam）接不到参数
weixin_30319097的博客
04-09 1188
遇到的问题描述 ：axios post 请求，后端接收不到参数。 　　　　　　　　我们的接口是java，用@RequestParam来接收前端的参数 解决方案：使用qs；axios中已经包含有qs，所以无需重新安装，直接引入就好 import Qs from 'qs'//引入qs let chedata = { data: encStr, sign...
vue 前端传json ，java后端post @requestparam 接收不到参数
supli的博客
10-27 910
vue post传json ，java post @requedtParam接收不到
axios 发 post 请求，后端接收不到参数的详细解决方案
十年呵护的专栏
11-05 1万+
  问题描述 ：axios post 请求或者get请求后接收不到参数 后端接收设置： @RequestParam @RequestBody设置的原因   由于spring的RequestParam注解接收的参数是来自于requestHeader中，即请求头，也就是在url中，格式为xxx?username=123&password=456，而RequestBody注解接收的参数则是...
Vue使用axios向后台发送请求的时候，后台接收不到参数
weixin_43208652的博客
09-23 878
前两天在开发Vue项目中使用axios向后台发送请求的时候，后台接收不到参数。百度了各种解决方法。 解决方法： 使用qs对参数进行处理，代码如下： import request from '../utils/request'; import Qs from 'qs' //tablelist export const fetchData = (query) => { return re...
axiospost请求向后端提交数据
wyw223的博客
05-08 2422
axiospost请求向后端提交数据 Axios向后端提交数据容易接收不到原因是传参方式是request payload,参数格式是json，而并非用的是form传参，所以在后台用接收form数据的方式接收参数就接收不到了。post表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求如果不指 ...
Axios与后端交互，后端接收不到参数
qq_56494197的博客
09-14 2260
前端用对象类进行传参时，后台接收对象封装的数据要用@RequestBoby接收，对象的每个属性名也必须与后端的对象属性名保持一致，属性个数也要相同。我原来是后端的实体对象比前端传的对象参数多了一个id属性，所以传不过去，改成一样就好了。前端发送了一个POST请求，请求体中包含一个JSON对象，可以使用@RequestBody注解将其转换为Java对象。1.使用GET请求时，参数名应该用params,参数会直接追加至请求字符串(url)后。用于获取请求参数的值，可处理GET和POST请求。
【Vue】axios的post方法无法传参问题
Shino_jie的博客
08-09 895
导入并使用qs把对象转成json字符串，这样就能成功传数据了。数据直接写对象格式或者转json都没有用。大概是因为axios的默认格式问题。后端无论如何都接收不到数据。
Vue使用Post请求在Body中传递参数
qq_36811160的博客
07-13 1万+
1、前端 export function vip_account_add(parameter) { parameter.timeStamp = new Date().getTime(); return axios({ url: 'datahome/member/addMember', method: 'post', data: JSON.stringify(parameter), headers: { 'Content-Type
axios参数传递
qq_44958875的博客
12-01 1140
axios的参数传递方式 1：get Axios.get('url', { params: { id: 123, name: 'DAN', } }) 2:post Axios.post('url', { id: 123, name: 'DAN', }) 3:put Axios.put('url', { ...
axios请求后端拿不到数据的解决方案
lucky__peng的博客
09-21 1万+
文章目录 问题场景问题原因要点1要点2 问题分析解决方案解决方案一解决方案二解决方案三解决方案四解决方案五解决方案六 问题场景 场景很简单，就是一个正常 axios post 请求： axios({ headers: { 'deviceCode': '...
关于vue封装的axios在请求错误时获取不到错误状态码的初步发现
热门推荐
奔跑的IT小白的博客
06-09 3万+
我们在写vue项目的时候，项目有的时候需要自己再次封装一个网络请求，比如： 由于vue在开发的时候，默认的请求是localhost:8080,一般在请求后端的接口的时候，会有一个跨域的问题，跨域的解决就不写了，网上一大堆，比如在响应拦截的时候，如果请求错误，上面有些错误码，比如404,500之类的。但是在开发环境的情况下，存在跨域，如果请求错误，会存在获取不到错误状态码的情况，比如： ...
"Vue项目开发中的问题与难点：axios post请求及路由传参解决方案
第一个问题是使用axios进行post请求时的坑。开始时我使用axios的post方法向后端发送请求，但数据一直没有传递到后端。后来我查了文档才知道axios对于post请求有拦截功能，需要自己进行判断，或者使用提供的qs方法对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值