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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (616)

我试图使用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发送数据在这种情况下不起作用。

提问于
用户回答回答于

默认情况下以格式axios发送,您只能获取。requestBodyjson$_POSTform-data

json在php中获取此请求,您需要requestBody输入以下内容来获取raw :file_get_contents('php://input')

也发送json格式,没有 -vm.toFormData(vm.newPerson)

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

js文件内容在这里

php文件内容在这里

用户回答回答于

您最好的选择可能是设置内容类型标头,以便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));

编辑:Webpackless方法

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;
        }
    }
});

扫码关注云+社区

领取腾讯云代金券