Vue使用axios POST提交数据PHP却无法接收到参数？

我会带着你远行 2022-04-06 02:47 388阅读 0赞

公司一个非常老的项目，为了与时俱进方便开发，通过`script`方式引入了`Vue`和`element-ui`。

之前都是使用jQuery发送Post请求，当使用axios发送POST请求是，PHP却接收不到表单值。

### 问题分析 ###

通过 Chrome 控制台，查看请求 Headers 参数，通过 axios 发送的POST请求，请求`Headers`与普通的 form 表单提交的请求头 `Headers`不同。

(1) 通过Chrome控制台，查看请求Headers参数，Form Data 部分如下:

{
        "params":{
        "search":"2222"},"page":1,"pageSize":15,"time":1544174159257}

点击 “view source” 查看源码，提交参数还是json格式:

{
        "params":{
        "search":"2222"},"page":1,"pageSize":15,"time":1544174316878}

(2) 正常的form表单提交，Form Data参数应该是这样的：

params[search]: 2222
    page: 1
    pageSize: 15
    time: 1544174271925

点击 “view source” 查看源码，是一个字符串形式:

params%5Bsearch%5D=2222&page=1&pageSize=15&time=1544174271925

这是因为，axios 默认是使用 payload 形式提交是数据，而 jQuery 则默认使用 form 表单提交的数据。而通过 payload 形式的数据 PHP `$_POST` 无法接受到。

### 解决办法 ###

(1) 修改前端代码:

修改 `axios` 提交数据格式，使用 `qs` 转换数据:

var axiosAjax = axios.create({
        
        baseURL:'/',
        // <---- 这里使用 qs 转换参数
        transformRequest: [function (data) {
         // 转换数据
            data = Qs.stringify(data); // 通过Qs.stringify转换为表单查询参数
            return data;
        }],
        headers:{
        
            'Content-Type':'application/x-www-form-urlencoded'
        }
    })

(2) 修复后端代码:

修改后端PHP代码，使后端能够接收 payload 数据。

// 获取payload json数据，转换成数组形式
    $postData = file_get_contents('php://input');
    $requests = !empty($postData) ? json_decode($postData, true) : array();

备注，如果后端使用 Laravel 框架则无需修改，默认可以接收 payload 数据。

### 代码实例 ###

引入 vue 与 element-ui 库:

在 html 的 head 部分通过 script 方式引入 vue 与 element-ui:

<head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>活动管理</title>
    
        
        <script type="text/javascript" src="/static/vuejs/vue.min.js"></script>
        <script type="text/javascript" src="/static/axios/axios.min.js"></script>
        <script type="text/javascript" src="/static/axios/qs.js"></script>
        
        <link rel="stylesheet" href="/static/element-ui/lib/theme-chalk/index.css">
        
        <script src="/static/element-ui/lib/index.js"></script>
        
        <link href="./static/css/admin.css?v=2014101013" rel="stylesheet" type="text/css" />
    </head>

使用 Vue 和 axios 提交数据:

<script type="text/javascript">
        var requestUr = '/ajax.php';
        // axios
        var axiosAjax = axios.create({
        
            baseURL:'/',
            transformRequest: [function (data) {
         // <--- here 转换数据
                data = Qs.stringify(data); // 通过Qs.stringify转换为表单查询参数
                return data;
            }],
            headers:{
        
                'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        // vue
        var app = new Vue({
        
            el: '#app-main-content',
            data: {
        
                message: 'Hello Vue!',
                formData: {
        },
                formRules: [],
                activeId : activeId,
                tableData: [],
                pageSize: 15,
                currentPage: 1,
                totalPage: 0,
                totalNum: 0,
                loading: true
            },
            mounted() {
        
                this.prepareComponent();
            },
            methods: {
        
                prepareComponent() {
        
                    console.log('hi, vote component mounted.');
                },
                onSubmit() {
        
                    let _this = this;
                    this.loading = true; // 区域加载开启
                    // 发送POST请求
                    axiosAjax.post(requestUrl + '&m=get_active_list',  {
        
                        'params' : _this.formData,
                        'time' : (new Date()).getTime()
                    }).then(function (response) {
        
                        _this.tableData = response.data.data.dataList
                        _this.pageSize =  response.data.data.pageSize
                        _this.currentPage = response.data.data.currentPage
                        _this.totalPage = response.data.data.totalPage
                        _this.totalNum = response.data.data.dataTotal
                        _this.loading = false // 区域加载取消
                    })
                    .catch(function (error) {
        
                        console.log('------> onSubmit error: ');
                        console.log(error);
                    });
                }
            }
        })
    </script>

### 参考链接 ###

[https://segmentfault.com/a/1190000012635783][https_segmentfault.com_a_1190000012635783]  
[https://www.cnblogs.com/small-coder/p/9115972.html][https_www.cnblogs.com_small-coder_p_9115972.html]  
[https://github.com/ljharb/qs][https_github.com_ljharb_qs]

\[END\]

[https_segmentfault.com_a_1190000012635783]: https://segmentfault.com/a/1190000012635783
[https_www.cnblogs.com_small-coder_p_9115972.html]: https://www.cnblogs.com/small-coder/p/9115972.html
[https_github.com_ljharb_qs]: https://github.com/ljharb/qs

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE_vue中axios使用post传递参数给后端JAVA无法接受到参数如何解决

前段传递了参数控制台查看都没有问题，但是后端接收不到参数 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

古城微笑少年丶/ 2022年12月16日 13:23/ 0 赞/ 140 阅读

相关 php post数据到mysql_php接收post数据并写入mysql问题

求专家解答：php如何接收远程post过来的txt文本内容并同时写入mysql数据库呢？求完整代码！合适可加分！ txt文本内容字段格式：学生id、学生名字、学生邮箱、学

╰+哭是因爲堅強的太久メ/ 2022年10月22日 10:59/ 0 赞/ 192 阅读

相关 php接收post原始数据

需要设置php.ini中的always\_populate\_raw\_post\_data值为On才可以。 <?php $json =

旧城等待，/ 2022年06月14日 03:25/ 0 赞/ 175 阅读

相关 vue中post方式提交数据后台无法接收

最近用vue做项目，遇到ajax提交值的问题。用post方式提交，后台无法接收到值。百度了半天，各种解决方式都有，下载中间件之类的，都试了。最后咨询大牛才知道是数据没有

落日映苍穹つ/ 2022年06月10日 10:11/ 0 赞/ 283 阅读

相关 axios post 参数请求不到

1、记录axios填坑之路最近用vue编写项目。用axios请求后端数据时。 ![20181108152533829.png][] 后台没有接收到数据。纳闷。查看浏

ゝ一世哀愁。/ 2022年04月18日 04:35/ 0 赞/ 304 阅读

相关 vue-axios post请求发送的数据后台无法接受到的问题

this.axios.post(`http://blog2.test/Home/Index/update`,this.data) 我们这样向后台发送数据，后台接受不到

た入场券/ 2022年04月11日 12:06/ 0 赞/ 222 阅读

相关 Vue使用axios POST提交数据PHP却无法接收到参数？

公司一个非常老的项目，为了与时俱进方便开发，通过`script`方式引入了`Vue`和`element-ui`。之前都是使用jQuery发送Post请求，当使用axios发

我会带着你远行/ 2022年04月06日 02:47/ 0 赞/ 389 阅读

相关 Vue项目 axios post方法传参后台接收不到参数

我的qq 2038373094 问题描述 1、页面上显示的参数是有值的 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

- 日理万妓/ 2022年02月01日 23:19/ 0 赞/ 319 阅读

相关 vue --- axios发post请求后台接收不到参数的三种解决方案

最近用vue 做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况： ![1278249-20190116143625141-1729702827.p

逃离我推掉我的手/ 2021年12月20日 09:07/ 0 赞/ 564 阅读

相关 axio post 请求后端接收不到参数的解决办法

原因是没有对参数进行序列化默认情况下，axios将JavaScript对象序列化为JSON。要以应用程序/ x-www-form-urlencoded格式发送数据。在

r囧r小猫/ 2021年12月20日 08:51/ 0 赞/ 421 阅读