使用Axios将数据从Vue.js传递到PHP
使用Axios将数据从Vue.js传递到PHP
提问于 2018-08-14 02:12:54
我正在尝试传输一些数据从一个图形用户界面在Vue.js做的PHP文件使用Axios。我尝试了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';
}
?>我得到No todo总是显示在PHP文件上。因此，在这种情况下，通过GET和POST发送数据都不起作用。
回答 2
Stack Overflow用户
发布于 2018-08-14 02:58:17
Stack Overflow用户
发布于 2018-08-14 03:03:35
您的最佳选择可能是设置内容类型标头，以便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;然后，在您的组件文件中，您将需要上面类似于const axios = require('./utils/axios')的/utils/axios.js实例，现在您已经有了一个具有相同配置的共享实例，可以在整个过程中使用它。最重要的是，上面的配置每次都会使用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;
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51828264
复制相关文章
相似问题