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

Posted 2023-02-22

技术标签:

【中文标题】使用 Axios 将数据从 Vue.js 传递到 PHP【英文标题】：Passing data from Vue.js to PHP using Axios 【发布时间】：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 【参考方案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的响应或网络面板中是否有返回任何内容？

以上是关于使用 Axios 将数据从 Vue.js 传递到 PHP的主要内容，如果未能解决你的问题，请参考以下文章

Vue js 从 axios 只显示一次 props

Vue.js 模板循环 - 异步 axios 调用

将 axios 中的道具传递给 Vue.js？

Vue Js 在我用 Axios get 调用的函数内部，将传入的数据打印到数组中

将数据从父模式传递到子模式 - Vue.js

Vue.js 将数据从插槽传递到组件实例