Vue axios 请求数据时 php 无法接收到数据,解决

25 篇文章 0 订阅
当使用axios在Vue中向PHP发送POST请求时,可能会遇到数据无法被后台接收的问题。原因是axios默认未以formData格式发送数据,而PHP期望这种格式。解决方案是在axios配置中使用qs库将数据转换为formData格式。可以在main.js中设置axios的默认transformRequest,或者自定义一个方法在请求前转换数据。应用这些修改后,PHP后台将能正确接收到数据。
摘要由CSDN通过智能技术生成

Vue axios 请求数据时 php 无法接收到数据,解决

一、实例,无法接收到数据

如图,我以 post 的方式发送一个请求到 php 后台,请求中是有数据的,但后台没有接收到数据。

在这里插入图片描述
在这里插入图片描述

二、解决办法

这是因为 axios 发送数据时不是以 formData 的形式发送的,而 php 接收的是以 formData 形式的数据。
所以我们只需要把数据在请求之前转换一下就好。

这里我们用到一个工具 qs 只需要 qs.stringfy(data) 即可。
你可以在每次请求时都手动 stringfy 一次,但是这样麻烦。

我们可以直接在 axios 的默认设置中进行这个操作:
axios 可以设置默认配置,可以设置每次请求之前对数据进行处理,字段是 axios.defaults.transformRequest 接收的是数组。

官方说明:https://github.com/axios/axios
在这里插入图片描述

package.json 不添加 qs 工具,这个就不细说了。

main.js 中添加如下内容:

// Network request

import qs from 'qs'
import axios from 'axios'

// 设置 axios,把请求数据在这里转换一下,参考官方文档: https://github.com/axios/axios
axios.defaults.transformRequest = [(data, header) => {
  return qs.stringify(data);
}]

// 可以设置全局变量,这样就可以全局通过 this.$axios 使用 axios 了
Vue.prototype.$axios = axios

或者 你也可以自己封装一个方法,在里面自己用 qs 转换一下:


function postData(url, queryData) {
   return new Promise(function (resolve, reject) {
      axios.post(url, qs.stringify(queryData))
         .then(res => {
            if (res.data.success) {
               resolve(res.data)
            } else {
               popMessage(POP_MSG_TYPE.danger, res.data.info )
            }
         }).catch(() => {
         reject()
      })
   })
}

三、结果

这样处理之后,后台 php 就能正常接收到数据了。

在这里插入图片描述

本文参考博文:Vue使用axios POST提交数据PHP却无法接收到参数?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十月ooOO

许个愿,我帮你实现

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值