10

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.

3
  • what is Axios ? my favorite search engine finds only companies with this name
    – mmm
    Commented Oct 7, 2017 at 11:39
  • Here's a link. Commented Oct 7, 2017 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
    Commented Oct 7, 2017 at 18:28

2 Answers 2

23

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);
})
3
  • This is a solid way. Keeps from using another library or using a function that has limited backward compatibility.
    – RMH
    Commented Nov 29, 2017 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
    Commented Dec 13, 2018 at 20:33
  • That worked for me very well!! I was recieving always a 0 using axios.post... and with this solution the problem was fixed. Do you know why this works beyond your magical code? Commented Jun 30, 2021 at 20:36
11

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/

1
  • you made my day thanks alot. Commented Dec 20, 2023 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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