3

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.

  • what is Axios ? my favorite search engine finds only companies with this name – mmm Oct 7 '17 at 11:39
  • Here's a link. – Ratko Solaja Oct 7 '17 at 11:41
  • I try a example with "axios.get" and I receive JSON datas correctly. edit your question to show the code you try. – mmm Oct 7 '17 at 18:28
5

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);
})
  • This is a solid way. Keeps from using another library or using a function that has limited backward compatibility. – RMH Nov 29 '17 at 6:32
  • why is this not accepted? i am upset. And the question only voted up once (and that was me)??? whats going on on stackoverflow???? – Toskan Dec 13 '18 at 20:33
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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.