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

公司一个非常老的项目，为了与时俱进方便开发，通过script方式引入了Vue和element-ui。之前都是使用jQuery发送Post请求，当使用axios发送POST请求是，PHP却接收不到表单值。问题分析通过 Chrome 控制台，查看请求 Headers 参数，通过 axios 发送的POST请求，请求Headers与普通的 form 表单提交的请求头 Headers不同。(1) ...

Web后端技术

8456人浏览 · 2018-12-07 17:57:36

Web后端技术 · 2018-12-07 17:57:36 发布

公司一个非常老的项目，为了与时俱进方便开发，通过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>

    <!-- 引入vue和axios文件 -->
    <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>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="/static/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <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://www.cnblogs.com/small-coder/p/9115972.html
https://github.com/ljharb/qs

[END]

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^