Guida: come utilizzare correttamente AJAX in WordPress

AJAX è una tecnica che puoi utilizzare in Javascript per recuperare i dati dal server e aggiornare il contenuto della tua pagina senza ricaricarla nel tuo browser. In questo post analizzeremo come utilizzare correttamente AJAX in WordPress.

La maggior parte di voi probabilmente ha familiarità con l’esecuzione di richieste AJAX al di fuori di WordPress e desidera esaminare come farlo in WordPress. Potresti chiederti le seguenti domande:

1. A quale URL dovresti inviare le tue richieste AJAX nel tuo Javascript.
2. Come catturare effettivamente la richiesta AJAX in PHP, recuperare i suoi dati e inviare qualcosa indietro.
3. Assicurati che le tue richieste AJAX siano sicure.

In WordPress puoi eseguire richieste AJAX in admin e/o frontend; il processo è lo stesso con alcune differenze nella risposta alle domande di cui sopra. Entriamo subito!

Le basi per eseguire la richiesta AJAX in WordPress

La prima cosa di cui hai bisogno è, ovviamente, il javascript a cui vuoi inviare la richiesta AJAX. Dovrebbe essere accodato utilizzando un metodo valido per aggiungere script a WordPress, frontend o backend. Molto probabilmente hai già impostato uno script in cui hai solo bisogno della parte dell’invio o della richiesta di qualcosa da WordPress.

La pubblicazione di AJAX in WordPress richiede il passaggio di una variabile oggetto Javascript come dati alla richiesta. Nell’oggetto è necessario fornire come minimo un immobile; ‘ action‘. Il valore della actionproprietà ‘ ‘ è una stringa che può essere (quasi) qualsiasi cosa tu voglia. Questa azione è ciò che dice a WordPress come instradare la richiesta AJAX. Ma definisce anche parte del nome dell’hook a cui dovrai agganciarti in PHP per gestire la richiesta AJAX.

Quando si tratta di rispondere alla domanda 1 sopra: a quale URL dovresti inviare la tua richiesta AJAX? Questo varia a seconda che lo script sia accodato in admin o frontend. Poiché AJAX è già integrato nelle schermate di amministrazione di WordPress, puoi semplicemente utilizzare la variabile globale ajaxurl. Ma per le richieste frontend diventa un po’ più complicato perché è necessario fornire manualmente l’URL AJAX insieme al proprio Javascript. Altro su quello di seguito.

Per gestire le richieste AJAX in PHP, ti colleghi all’azione wp_ajax_<your action name>. Se desideri eseguire richieste AJAX nel frontend per utenti non registrati, puoi anche collegarti a wp_ajax_nopriv_<your action name>. Altro su quello di seguito. All’interno della tua funzione agganciata puoi accedere ai dati passati da Javascript facendo riferimento $_POSTall’array. Per restituire qualcosa, fai semplicemente eco a qualcosa. Questa è la risposta breve alla domanda 2 sopra.

Entriamo subito nel codice. Inizieremo con come aggiungere richieste AJAX nel pannello di amministrazione.

Esecuzione di richieste AJAX nell’amministratore di WordPress

Presumo che tu abbia già accodato uno script che reagisce ad alcune azioni dell’utente, raccoglie dati ed è pronto per eseguire una richiesta AJAX, sia per aggiornare qualcosa, sia per richiedere alcune informazioni da WordPress. Il codice seguente è un esempio molto semplificato; il codice accoda un file Javascript nel tema all’amministratore e all’interno del codice Javascript imposta alcune variabili casuali, esegue AJAX al caricamento della pagina e restituisce la risposta nella console.

add_action('admin_enqueue_scripts', function() {
    wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '/assets/js/awhitepixel-ajax.js', ['jquery'], '', true);
});

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_send_something',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(ajaxurl, data, function(response) {
        console.log(response);
    });
});

Come puoi vedere nel codice Javascript sopra, hai impostato un oggetto Javascript (pensalo come un array) con tutti i dati che vuoi trasmettere, inclusa l’importante actionproprietà ‘ ‘.

Inoltre, come accennato in precedenza, poiché AJAX è già integrato nelle schermate di amministrazione di WordPress, puoi semplicemente utilizzare la variabile globale ajaxurlcome URL AJAX.

Ora aggiungeremo il codice per accettare questa richiesta AJAX in PHP. Poiché ho fornito " awhitepixel_send_something" come valore di action", ho bisogno di agganciarmi wp_ajax_awhitepixel_send_something.

add_action('wp_ajax_awhitepixel_send_something', function() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
 
    wp_die();
});

All’interno della tua funzione agganciata hai pieno accesso a WordPress; puoi utilizzare qualsiasi funzione, query di WordPress e accedere a variabili globali (ad es $wpdb. per query di database). Tutte le variabili che hai passato in Javascript saranno disponibili all’interno $_POSTdell’array con le chiavi che hai fornito nell’oggetto Javascript.

È facoltativo restituire qualcosa a Javascript (ad esempio quando vuoi inviare solo una richiesta per aggiornare o salvare qualcosa e non hai bisogno di conferma). Se vuoi restituire qualcosa, semplicemente echoil tuo output. Per l’output di variabili più complesse rispetto a una semplice stringa, dovresti restituirlo come un array codificato json in modo che Javascript possa leggerlo e analizzarlo correttamente. Qualcosa come questo;

Un’ultima nota importante sull’ultima riga; wp_die(). Tutte le funzioni di callback AJAX dovrebbero "chiudere il thread" o terminare correttamente eseguendo die()o exit(). In WordPress utilizziamo wp_die()per una corretta integrazione ma il risultato è lo stesso. Se ti capita di ottenere uno strano "0" nelle tue risposte AJAX, è molto probabile che tu non ha fatto wp_die()o die().Sempre, assicurati sempre "muori" alla fine di tutte le funzioni agganciate a wp_ajax.

Esecuzione di richieste AJAX nel frontend di WordPress

Il processo di esecuzione di AJAX nel frontend è lo stesso dell’amministratore, ma un po’ più complicato nel rispondere alla domanda 1: a quale URL dovrebbe pubblicare AJAX. Nell’esempio precedente per l’esecuzione di AJAX in admin avevamo già una variabile Javascript globale, ajaxurl, ma questa variabile non è disponibile frontend. Dobbiamo fornirlo noi stessi. Per ottenere il valore dell’URL AJAX di WordPress che utilizzi admin_url('admin-ajax.php')(sì, "URL amministratore" per frontend).

Quando si accoda uno script frontend che eseguirà richieste AJAX nel proprio tema o plug-in, è necessario passare l’URL AJAX di WordPress come variabile a quel Javascript, utilizzando wp_localize_script().

Ora, nel tuo Javascript hai accesso a un oggetto Javascript globale Theme_Variables(questo nome può essere qualsiasi cosa tu voglia), con l’URL AJAX di WordPress come valore per ajax_urlla proprietà ‘ ‘. La tua funzione AJAX sarebbe qualcosa del genere:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

Quando si ha a che fare con AJAX nel frontend c’è un’altra cosa da tenere a mente riguardo all’hook che usi per accettare le richieste AJAX. Ti colleghi ancora a wp_ajax_<your action name>, ma questo hook funzionerà solo per i visitatori che hanno effettuato l’accesso. Se desideri eseguire richieste AJAX per i visitatori che non hanno effettuato l’accesso, devi (anche) agganciarti a wp_ajax_nopriv_<your action name>. Normalmente per le richieste AJAX front-end necessarie per il corretto funzionamento del tema, ti collegherai a entrambi, indirizzandoli entrambi alla stessa funzione.

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}

Per quanto riguarda il contenuto della tua funzione agganciata AJAX, è lo stesso delle richieste dell’amministratore. Hai accesso completo a WordPress, ottieni le variabili passate da $_POST, facoltativamente restituisci qualcosa eseguendo echoe dovresti sempre, sempre ricordarti di "morire" con wp_die()alla fine.

Protezione delle tue richieste AJAX

Poiché AJAX semplifica il passaggio dei dati tra script e back-end, dovresti assolutamente prendere i passaggi necessari per rendere sicuro il tuo codice. Ciò include la sanificazione di tutti i dati prima di salvarli, ma anche l’utilizzo della funzionalità "nonce" di WordPress per verificare se le richieste provengono da posizioni corrette e accettate. Leggi la documentazione di WordPress su nonce se non hai familiarità con essa.

La premessa di base è questa; utilizzi un metodo WordPress generando un valore nonce (wp_create_nonce()) o generando un campo di input nascosto con il valore nonce (wp_nonce_field()). Nella tua richiesta AJAX trasmetti il ​​valore nonce (che è codificato da WordPress) nella richiesta e nella parte accettante (wp_ajax_hook) verifichi il nonce con quello che hai impostato originariamente.

Aggiungiamo un po’ di sicurezza al codice di esempio che abbiamo fatto sopra. Per prima cosa genereremo un nonce e lo passeremo nel nostro wp_localize_scriptinsieme all’URL AJAX. Come parametro per wp_create_nonce()impostare una stringa univoca che solo noi dovremmo conoscere, per così dire. Nell’esempio seguente vado per ‘ awhitepixel-nonce‘.

Ciò che viene passato come ‘ nonce‘ nelle nostre variabili Javascript al frontend è un numero casuale generato da WordPress. Nessuno tranne noi, autori di questo script, sa che il nonce valido è ‘ awhitepixel-nonce‘. Nel nostro Javascript, raccogliamo il valore nonce e lo ritrasmettiamo nella nostra richiesta AJAX:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14,
        'nonce': Theme_Variables.nonce
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

E infine nella nostra wp_ajaxfunzione hook dovremmo iniziare controllando se il nonce era valido con wp_verify_nonce(). Forniamo la stringa univoca che abbiamo impostato sopra e se WordPress non corrisponde al valore codificato univoco trasmesso con questa stringa, terminiamo immediatamente:

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {
        wp_die(-1);
    }
 
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}