Question

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

我在此 index.php 表单中输入数据：

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';
}
?>

我总是在PHP文件上显示 No todo 。因此，在这种情况下，无法同时通过GET和POST发送数据。

Answer 1

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

{{ form_widget(groupMember.user) }}

编辑：

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

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

然后在您的组件文件中，您将需要以上## 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，现在您将拥有一个共享的实例，该实例具有相同的配置以供使用。最重要的是，上述配置将每次使用transformRequest将json对象转换为formdata，因此您不必在组件级别执行此操作。在您的组件代码下面，您可以这样做：

const axios = require('./utils/axios')

编辑：Webpackless方法

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

Answer 2

默认情况下，axios以requestBody格式发送json，使用$_POST只能获取form-data。

要在php中获取此json请求，您需要输入以下内容来获取原始的requestBody：file_get_contents('php://input')

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

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

js文件内容here

php文件内容here

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

2 个答案: