logo标签列表

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

javascriptphphtmlvue.jsaxios
7
我将尝试将Vue.js GUI中的一些数据通过Axios传输到PHP文件。我尝试使用GET和POST参数，但都不起作用：
我在这个index.php表单中输入数据：

enter image description here

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代码，只留下后面的部分，我发现当我运行这个文件时，我总是收到消息“未接收到数据”。
<?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文件中一直看到没有待办事项的提示。因此，在这种情况下，通过GET和POST发送数据都无法工作。

1
$_POST 里面有什么？（PHP 方面） - sheplu
我希望在GUI的输入字段中输入的内容可以更新JS文件中的数据。 - Billal Begueradj
axios.post('phpfile.php?todo=something', ...) 使用 ? 代替 / 将参数附加到 $_GET 数组中。 - JacobW
如果在提交之前使用console.log打印vm.newPerson和personForm，会发生什么？它们都被设置了吗？ - JacobW
它们都会相应地显示 @JacobW - Billal Begueradj
2个回答
7

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

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

同时以json格式发送，不需要 - vm.toFormData(vm.newPerson)

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

js文件内容在这里

php文件内容在这里

你能否尝试不使用 vm.toFormData(vm.newPerson) 直接发送 JS 对象？ - Lasha Kitia
我已经尝试了，但仍然无法看到PHP文件中显示的数据。 - Billal Begueradj
1
请在以下这行代码后面打印 $requestBody： $requestBody = file_get_contents('php://input'); - Lasha Kitia
奇怪...文件是否与我发布的完全相同？或者上面包含/需要了其他的PHP文件？ - Lasha Kitia
是的，我发布了我正在使用的确切3个文件。 - Billal Begueradj
显示剩余2条评论
4

你最好的选择可能是设置content-type头，这样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的then部分中，是否输出了错误或响应？你可能设置了错误的配置而不是错误的代码。你的本地PHP服务器是如何运行的，是命令行还是其他工具？我已经在JavaScript和React中使用上述配置而没有任何问题。 - JacobW
我目前只是在测试短例子（这两个技术都是初学者），所以我使用CDN中的Axios和Vue.js。 - Billal Begueradj
1
哦，你没有使用像webpack这样的转译器吗？ - JacobW
请检查我上面发布的更新方法，看看是否适用于您。 - JacobW
不好意思，我在想你是否真的使用了正确的配置来访问 PHP 文件。你可以尝试使用像 Postman 这样的工具来访问 PHP 文件吗？在 Chrome 的响应或网络面板中有任何返回信息吗？ - JacobW
当你使用AJAX时，它会执行一个POST请求。当你只是打开文件时，它是一个GET请求。你明白我的意思吗？ - JacobW
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接