I am new to Vue and for this project, I was trying to pass variable customer name value to PHP file where it will search the customer name. I am able to pass the value from axios.post following this stackoverflow link , still my PHP file does not receive or print out the value.
Is there a way to pass value from axios.post and receive/print out in PHP file?
View
<div id="app">
<input type="text" v-model="customerName" placeholder="Enter customer first name">
<button type="button" @click="buttonClicked()">
Click
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Method
new Vue({
el: "#app",
data: {
customrName : '',
},
methods: {
buttonClicked(){
var form = new FormData();
form.append('customerName', this.customerName);
axios.post(url,{
form
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
})
PHP file
header("Content-type: application/json";
$data = json_decode(file_get_contents("php://input"), TRUE);
$CustomerName = $data['customer_name'];
echo $CustomerName; /** does not print out the customer name typed from VIEW input field **/
You have four problems.
You're POSTing a FormData object. That will generate a multipart request and not a JSON request.
Read the data from $_POST. Stay away from php://input.
You send customerName and try to read customer_name. Pick one and stick with it.
You said header("Content-type: application/json"; but you are outputting the user input raw. This is text/plain and not application/json.
Either use the right content-type or encode the output as JSON.
The ) is missing from the call to header.