使用 Axios 將數據從 Vue.js 傳遞到 PHP

Question

我正在嘗試使用 Axios 將一些數據從在 Vue.js 中完成的 GUI 傳輸到 PHP 文件。 我嘗試了 GET 和 POST 參數，但它不起作用：

我在這個index.php表單中輸入數據：

索引.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

默認情況下， axios以json格式發送requestBody並且使用$_POST您只能獲取form-data 。

要在 php 中獲取此json請求，您需要通過鍵入以下內容來獲取原始requestBody ： file_get_contents('php://input')

也以json格式發送，沒有 - vm.toFormData(vm.newPerson)

我已經在我的服務器上創建了 php 文件進行測試。

js文件內容在這里

php文件內容在這里

Answer 2

您最好的選擇可能是設置 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));

編輯：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;
        }
    }
});

使用 Axios 將數據從 Vue.js 傳遞到 PHP

問題描述

2 個解決方案

解決方案1
5 2018-08-13 18:58:17

解決方案2
4 2018-08-13 19:03:35

使用 Axios 將數據從 Vue.js 傳遞到 PHP

問題描述

2 個解決方案

解決方案1 5 2018-08-13 18:58:17

解決方案2 4 2018-08-13 19:03:35

解決方案1
5 2018-08-13 18:58:17

解決方案2
4 2018-08-13 19:03:35