使用 Axios 将数据从 Vue.js 传递到 PHP答案

【问题标题】：Passing data from Vue.js to PHP using Axios使用 Axios 将数据从 Vue.js 传递到 PHP
【发布时间】：2019-01-20 12:49:14
【问题描述】：

我正在尝试将一些数据从在 Vue.js 中完成的 GUI 传输到使用 Axios 的 PHP 文件。我尝试了 GET 和 POST 参数，但它不起作用：

我在这个 index.php form 中输入数据：

index.php:

<!DOCTYPE HTML>
<HTML>
<head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<BODY>
    <div id="container" class="container">
        <div>
            <label>First name:</label><br/>
            <input type="text" v-model='newPerson.firstName'>
        </div>
        <div>
            <label>Last name: </label><br/>
            <input type="text" v-model="newPerson.lastName">
        </div>
        <button v-on:click="sendIdentity()">Submit</button>       
    </div>    
    <script src="myjscode.js"></script>
</BODY>
</HTML>

myjscode.js：

当我按下按钮提交数据时，我在console.log(response.data)看到了正确的输出：

let vm = new Vue({
    el: "#container",
    data: {
        newPerson: {
            firstName: '',
            lastName: ''
        }
    },
    methods: {
        sendIdentity: function() {
            let personForm = vm.toFormData(vm.newPerson);
            axios.post('phpfile.php', personForm)
                .then( function(response) {
                    console.log(response.data)
                });
        },
        toFormData: function(obj) {
            let formData = new FormData();
            for(let key in obj) {
                formData.append(key, obj[key]);
            }
            return formData;
        }
    }
});

phpfile.php:

在这个文件上，我宁愿插入一个 MySQL 表，但是它永远不会生效。我删除了 MySQL 代码，只保留以下内容，我注意到当我运行此文件时，我总是收到消息 Data not received：

<?php
if( isset($_POST['firstName']) && isset($_POST['lastName'])){
   echo $_POST['firstName'];
   echo $_POST['lastName'];      
} else {  
   echo 'Data not received';
}
?>

我错过了什么？

更新：

当我更改上面的 myjscode.js 时，我注意到：

axios.post('phpfile.php?todo=something', ...)

然后我将 phpfile.php 更改为

<?php

if( isset($_GET['todo']) ){
   echo $_GET['todo'];
} else {
   echo 'No todo';
}
?>

我得到 No todo 总是显示在 PHP 文件上。因此，在这种情况下，通过 GET 和 POST 发送数据都不起作用。

【问题讨论】：

$_POST 里面有什么？（PHP端）
我希望是 JS 文件中的数据由我在 GUI 的输入字段中键入的内容更新
axios.post('phpfile.php?todo=something', ...) 使用 ?而不是 / 追加到 $_GET 数组。
如果你在发布之前 console.log vm.newPerson 和 personForm 会发生什么？它们都设置了吗？
它们都相应地显示@JacobW

标签： javascript php html vue.js axios

【解决方案1】：

默认axios以json格式发送requestBody，而$_POST只能获取form-data。

要在 php 中获取此 json 请求，您需要通过键入：file_get_contents('php://input') 获取原始 requestBody

也以json 格式发送，不带 - vm.toFormData(vm.newPerson)

我已经在我的服务器上创建了 php 文件来测试。

js文件内容here

php文件内容here

【讨论】：

您可以尝试在没有vm.toFormData(vm.newPerson) 的情况下发送吗？只需发送 JS 对象
我做了，我仍然看不到显示的PHP文件上的数据
你有哪个版本的php？你能确定php-json已经安装了吗？
我有 PHP 7.2。请注意，数据显示在控制台中（我在其中运行 localhost/index,php）但我只是在 localhost/phpfile.php 上看不到它
也在行后打印$requestBody：$requestBody = file_get_contents('php://input');

【解决方案2】：

您最好的选择可能是设置内容类型标头，以便 PHP 知道预期的数据类型。

const options = {
  method: 'POST',
  headers: { 'content-type': 'application/form-data' },
  data: personForm,
  url: 'phpfile.php',
};
axios(options);

编辑：

创建 axios 的共享实例以获得最佳结果和易用性。

## Filename /utils/axios.js
const instance = axios.create({
    baseURL: 'https://some-domain.com/api/ or file.php',
    timeout: 1000,
    headers: {'Content-Type': 'application/form-data'},
    transformRequest: [function (data, headers) {
        // Do whatever you want to transform the data
        let formData = new FormData();
        for(let key in data) {
            formData.append(key, obj[key]);
        }
        return formData;
    }],
});

export default instance;

然后在您的组件文件中，您需要上面的 /utils/axios.js 实例，例如 const axios = require('./utils/axios')，现在您有一个共享实例，其配置相同，可以在整个过程中使用。最重要的是，上面的配置每次都会使用 transformRequest 将您的 json 对象转换为 formdata，因此您不必在组件级别执行此操作。在你的组件代码下面你会做：

axios
    .post(jsonObjectofData)
    .then()
    .catch(err => console.log(err));

编辑：无 Webpack 方法

let vm = new Vue({
    el: "#container",
    data: {
        newPerson: {
            firstName: '',
            lastName: ''
        }
    },
    methods: {
        sendIdentity: function() {
            let personForm = vm.toFormData(vm.newPerson);
            const options = {
                method: 'POST',
                headers: { 'content-type': 'application/form-data' },
                data: personForm,
                url: 'phpfile.php',
            };
            axios(options)
                .then( function(response) {
                    console.log(response.data)
                })
                .catch(err => console.log(err);
        },
        toFormData: function(obj) {
            let formData = new FormData();
            for(let key in obj) {
                formData.append(key, obj[key]);
            }
            return formData;
        }
    }
});

【讨论】：

当时的 axios 是否有错误输出或响应？您可能设置了错误的配置，而不是错误的代码。您的本地 PHP 服务器如何运行、命令行或其他工具？我在 javascript 中使用上述配置没有问题并对 axios 做出反应。
我使用 CDN 中的 Axios 和 Vue.js，因为我目前只是在测试简短的示例（这 2 种技术的初学者）
哦，你没有使用像 webpack 这样的转译器？
检查我上面发布的更新方法，看看是否适合你。
不，我想知道您是否真的在使用您的配置来访问 php 文件。您可以尝试使用邮递员之类的工具来访问 PHP 文件吗？ chrome的响应或网络面板中是否有返回任何内容？