WordPress AJAX con Axios: come utilizzarlo per le richieste AJAX

Question

WordPress AJAX con Axios: come utilizzarlo per le richieste AJAX

7 ott 2017, 13:30:05

Visualizzazioni: 17.1K

Voti: 10

Ho una domanda veloce. Qualcuno è riuscito a utilizzare Axios all'interno di WordPress per fare richieste AJAX (wp_ajax con action - chiamando una funzione) senza usare la REST API e come avete fatto?

Sembra che Axios invii un JSON e ogni volta che provo la richiesta ottengo uno 0. Tuttavia, utilizzando jQuery AJAX funziona bene.

Ratko Solaja

131

ajax

Commenti

cos'è Axios? il mio motore di ricerca preferito trova solo aziende con questo nome

mmm

7 ott 2017 14:39:35

Ecco un link.

Ratko Solaja

7 ott 2017 14:41:36

Ho provato un esempio con "axios.get" e ricevo correttamente i dati JSON. Modifica la tua domanda per mostrare il codice che hai provato.

mmm

7 ott 2017 21:28:30

Tutte le risposte alla domanda

Commenti

Questo è un metodo solido. Evita di utilizzare un'altra libreria o una funzione che ha una compatibilità limitata con le versioni precedenti.

RMH

29 nov 2017 08:32:51

perché questo non è accettato? Sono arrabbiato. E la domanda è stata votata solo una volta (e quella ero io)??? cosa sta succedendo su stackoverflow????

Toskan

13 dic 2018 22:33:04

Questo ha funzionato perfettamente per me!! Ricevevo sempre uno 0 usando axios.post... e con questa soluzione il problema è stato risolto. Sai perché funziona oltre al tuo codice magico?

Fernando Torres

30 giu 2021 23:36:08

Commenti

mi hai fatto la giornata, grazie mille.

Fatih Toprak

21 dic 2023 00:02:19

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

puoi utilizzare FormData

un esempio:

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 ott 2017 18:26:42

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

Devi inviare i tuoi dati nel formato application/x-www-form-urlencoded.

Poiché axios invia json, $_REQUEST['action'] non viene ricevuto da WordPress e restituisce '0'.

Per ottenere questo risultato puoi utilizzare l'API URLSearchParams o Qs.

Ora supponi che il tuo codice jQuery fosse qualcosa come questo


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

Allora utilizzando URLSearchParams il tuo codice corrispondente con Axios sarà


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

OPPURE se stai usando Qs.js, devi includere Qs prima del tuo 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);
});

Questo è spiegato in modo più dettagliato nel seguente link.

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