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=""></script>
<script src=".18.0/axios.js"></script>
<link rel="stylesheet" href=".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.
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./vue"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/axios/0.18.0/axios.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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.
Share Improve this question edited Aug 14, 2018 at 3:03 Billal BEGUERADJ asked Aug 13, 2018 at 18:12 Billal BEGUERADJBillal BEGUERADJ 22.8k45 gold badges123 silver badges140 bronze badges 5- 1 what's inside $_POST ? (PHP side) – sheplu Commented Aug 13, 2018 at 18:21
- I am hoping it is the data in the JS file which are updated by what I type in the input fields of the GUI – Billal BEGUERADJ Commented Aug 13, 2018 at 18:23
-
axios.post('phpfile.php?todo=something', ...)Use a ? instead of / to append to the $_GET array. – JacobW Commented Aug 13, 2018 at 18:50 - What happens if you console.log vm.newPerson and personForm before the post? Are they both set? – JacobW Commented Aug 13, 2018 at 18:52
- They get both displayed accordingly @JacobW – Billal BEGUERADJ Commented Aug 13, 2018 at 18:55
2 Answers
Reset to default 7By 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
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./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 ponent 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 ponent level.
Below in your ponents 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;
}
}
});