Passing data from Vue.js to PHP using Axios

Question

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.

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
– 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
– 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
– JacobW, Commented Aug 13, 2018 at 18:52

Lasha Kitia · Accepted Answer · 2018-08-13 20:21:47Z

7

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

edited Aug 13, 2018 at 20:21

answered Aug 13, 2018 at 18:58

Lasha Kitia

1417 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lasha Kitia Over a year ago

can you try to send without vm.toFormData(vm.newPerson)? just send JS Object

Billal BEGUERADJ Over a year ago

I did, I still can not see the data on the PHP file displayed

Lasha Kitia Over a year ago

Which version of php do you have? can you make sure that php-json is installed?

Billal BEGUERADJ Over a year ago

I have Php 7.2. Note that the data is displayed in the console (where I run localhost/index,php) but I just do not see it on localhost/phpfile.php

Lasha Kitia Over a year ago

also print $requestBody after line: $requestBody = file_get_contents('php://input');

|

JacobW · Accepted Answer · 2018-08-13 19:48:35Z

4

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;
        }
    }
});

edited Aug 13, 2018 at 19:48

answered Aug 13, 2018 at 19:03

JacobW

8765 silver badges15 bronze badges

6 Comments

JacobW Over a year ago

Is there an error being output or a response in the then piece of axios? You might have bad configuration set up rather than bad code. How is your local PHP server being run, command line or another tool? I've used the above config without issue in javascript and react for axios.

Billal BEGUERADJ Over a year ago

I use Axios and Vue.js from the CDN because I am just testing short examples for the moment (beginner in these 2 techs)

JacobW Over a year ago

Ohh you're not using a transpiler like webpack?

JacobW Over a year ago

Check the updated method I posted above and see if that works for you.

JacobW Over a year ago

No, I'm wondering if you're actually hitting the php file at all with your configuration. Can you try to hit the PHP file using a tool like postman? Is there anything returned in the response or the network panel of chrome?

|

Collectives™ on Stack Overflow

Passing data from Vue.js to PHP using Axios

2 Answers 2

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related