Cómo usar Axios para AJAX en WordPress | Solución a error 0

Question

Cómo usar Axios para AJAX en WordPress | Solución a error 0

7 oct 2017, 13:30:05

Vistas: 17.1K

Votos: 10

Tengo una pregunta rápida. ¿Alguien ha logrado usar Axios dentro de WordPress para hacer peticiones AJAX (wp_ajax con acción - llamando a una función) no con la API REST y cómo lo hicieron?

Parece que Axios envía un JSON y cuando intento la petición obtengo un 0. Sin embargo, usando jQuery AJAX funciona bien.

Ratko Solaja

131

ajax

Comentarios

¿Qué es Axios? Mi motor de búsqueda favorito solo encuentra empresas con ese nombre

mmm

7 oct 2017 14:39:35

Aquí hay un enlace.

Ratko Solaja

7 oct 2017 14:41:36

Probé un ejemplo con "axios.get" y recibí datos JSON correctamente. Edita tu pregunta para mostrar el código que intentaste.

mmm

7 oct 2017 21:28:30

Todas las respuestas a la pregunta

Comentarios

Esta es una forma sólida. Evita usar otra biblioteca o una función que tenga compatibilidad limitada con versiones anteriores.

RMH

29 nov 2017 08:32:51

¿por qué esto no es aceptado? estoy molesto. ¿Y la pregunta solo tiene un voto positivo (y ese fui yo)??? ¿qué está pasando en stackoverflow????

Toskan

13 dic 2018 22:33:04

¡Esto funcionó muy bien para mí! Siempre recibía un 0 usando axios.post... y con esta solución el problema se solucionó. ¿Sabes por qué funciona más allá de tu código mágico?

Fernando Torres

30 jun 2021 23:36:08

Comentarios

me alegraste el día, muchas gracias.

Fatih Toprak

21 dic 2023 00:02:19

Arturo Gallegos 432 · Answer 1 · 2017-10-30T18:26:42Z

puedes usar FormData

un ejemplo:

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

Arturo Gallegos

432

30 oct 2017 18:26:42

Karthik Thayyil 199 · Answer 2 · 2017-10-11T10:44:56Z

Necesitas enviar tus datos en formato application/x-www-form-urlencoded.

Como axios envía json, $_REQUEST['action'] no es recibido por WordPress y este retorna '0'.

Para lograrlo puedes usar ya sea la API URLSearchParams o Qs.

Ahora supón que tu código en jQuery era algo así:


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

Entonces, usando URLSearchParams tu código correspondiente en Axios sería:


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

O si estás usando Qs.js, necesitas encolar Qs antes de tu 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);
});

Esto está explicado con más detalle en el siguiente enlace.

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