WordPress AJAX with Axios

Question

I have a quick question. Did anyone managed to use Axios inside WordPress to do AJAX requests (wp_ajax with action - calling a function) not REST API and how did you do it?

It seems that Axios is sending a JSON and whenever I try the request I get a 0. However, using jQuery AJAX it works fine.

Answer 1

you can use FormData

an example:

let form_data = new FormData;
form_data.append('action', 'myAction');
form_data.append('first_name', 'my first name');
form_data.append('phone', 'my phone');

axios.post(myVars.ajax_url, form_data).then(function(response){
console.log(response.data);
})

Answer 2

You need to send your data in application/x-www-form-urlencoded format.

As axios sends json $_REQUEST['action'] is not received by wordpress and it returns '0'.

To achieve this you can use either use URLSearchParams API or Qs.

Now suppose your jQuery was something like this

var data = { action: 'get_names', key2:'value2' ...... };

jQuery.post('/wp-admin/admin-ajax.php', data )
.done( function (response) {
    console.log(response);
})
.fail( function (error) {
    console.log(error);
});

Then using URLSearchParams your corresponding Axios code will be

var params = new URLSearchParams();
params.append('action', 'get_names');
 params.append('key2', 'value2');
// params.append('key3', 'value3');
axios.post('/wp-admin/admin-ajax.php', params )
.then( function (response) {
    console.log(response.data);
})
.catch( function (error) {
    console.log(error);
});

OR if your are using Qs.js, You need to enqueue Qs before your script

var data = { action: 'get_names', key2:'value2' ...... }; 

axios.post('/wp-admin/admin-ajax.php', Qs.stringify( data ))
.then( function (response) {
    console.log(data);
})
.catch(function (error) {
    console.log(error);
});

This is explained in a bit more detail in the following link.

https://kt12.in/blog/wordpress-ajax-call-using-axios-js/