Menu
I am trying to transmit some data from a GUI done in Vue.js to a PHP file using Axios. I tried both with GET and POST parameters but it does not work:
I type the data in this 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:
When I press the button to submit the data, I see the right output in 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:
On this file, I am rather performing an insertion into a MySQL table, however it never takes effect. I removed the MySQL code and let only what follows, where I notice I always get the message Data not received when I run this file:
<?php
if( isset($_POST['firstName']) && isset($_POST['lastName'])){
echo $_POST['firstName'];
echo $_POST['lastName'];
} else {
echo 'Data not received';
}
?>
What am I missing?
Update:
I noticed when I changed the myjscode.js above like ths:
axios.post('phpfile.php?todo=something', ...)
And then I change phpfile.php to
<?php
if( isset($_GET['todo']) ){
echo $_GET['todo'];
} else {
echo 'No todo';
}
?>
I am getting No todo always displayed on the PHP file. So sending data both via GET and POST do not work in this situation.
802
By default axios sends requestBody in json format and with $_POST you only can fetch form-data.
to fetch this json request in php, you need to fetch raw requestBody by typing: file_get_contents('php://input')
also send in json format, without - vm.toFormData(vm.newPerson)
I've created php file on my server to test.
js file content here
php file content here
62
answered Sep 27 '22 02:09
Your best option might be to set the content-type header so PHP knows what data type to expect.
const options = {
method: 'POST',
headers: { 'content-type': 'application/form-data' },
data: personForm,
url: 'phpfile.php',
};
axios(options);
Edit:
Create a shared instance of axios for the best results and ease of use.
## 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;
Then in your component file you'd require this instance of /utils/axios.js above like const axios = require('./utils/axios') and now you've got a shared instance with the same config to use throughout. On top of that the above config will use transformRequest to turn your json object into formdata every time so you don't have to do it at the component level.
Below in your components code you'd do:
axios
.post(jsonObjectofData)
.then()
.catch(err => console.log(err));
Edit: Webpackless method
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;
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
