Axios Lessons for VueJS Developers Ep. 3
We have tried the get method, now, let’s try the post method.
When you are sending data using the POST method, at the PHP side, you will usually receive posted data using $_POST.
Do you wonder why I mention this? You will find out soon.
First, we add another button.
We are going to trigger axios post using it.
We name this button trigger axios post.
Inside trigger post, we install the post method.
Just like the get method, the first argument value of the post method is the URL of the backend file.
The second argument is an object holding all the data we want to send to the backend file.
But here, we only need an object, we do not need the params property anymore. We can directly store the data in it.
Here, we install a property called message and set its value to sent by the post method.
Then post method also needs to work together with the then and catch method.
We go to the interface dot php file and receive data sent by the post method.
We echo dollar sign underscore post message.
Before I try the program, do you think it will work or not?
Let’s find out.
The data property is empty. The backend program did not receive the data we send. So, what went wrong?
Click the network button.
Then click interface dot php.
Scroll to the bottom.
We can see the message has been sent. But somehow, we just cannot receive it at the php side.
The problem is request payload.
At the php side, we receive data using the global array dollar sign post.
For dollar sign post to work, it needs to be form data here, not request payload.
But there is nothing wrong with request payload. It is just another way of sending data. Our message has reached the backend file, we just need another way to receive it.
To receive data sent by request payload, we need a function called file get contents.
Its argument value is php colon double slash input.
The file get contents function will receive our message as a JSON string.
To retrieve the message content, we need to convert the json string into either an object or an associative array.
JSON decode is the function we use to do the conversion.
By default, the json decode function will convert a json string into an object.
We can retrieve message content using message as property name.
In PHP, you connect a property to its object using an arrow.
Let’s try the program.
Click the button.
We can see this time our message has been received by the php file successfully.
Some of you might prefer associative array over object.
In this case, we need to add a second argument value to the json decode function. We set the second argument value to true.
Now, variable data is an associative array.
We can retrieve message content using message as array key.
Some of you may not like request payload as it is not convenient to use.
What if we insist on receiving data using the global array dollar sign underscore post?
First, we open the project root folder and find the node modules folder.
Open it and scroll all the way to the bottom.
You will find a package called qs.
The qs package is the solution.
In the app.vue file, we first import the qs package.
The qs package has a method called stringify. We need to process the second argument value of the post method.
Now, we can receive data using dollar sign underscore post at the php side.
Let’s test the program.
Click interface dot php and scroll to the bottom.
We can see this time, we got form data, not request payload. This means we can receive data using $_POST at the PHP side.
In the next lesson, we will show you how to set pathRewrite in webpack dev server proxy. Stay tuned.
Check out our FULL VueJS course on Udemy:
https://www.udemy.com/vuejs-for-students-with-zero-es6-foundation/?couponCode=MEDIUM_PROMO_1