Ajax con WordPress

English Language
Due esempi di Ajax e WordPress. Uno con jQuery e uno senza jQuery.

Il codice necessario per implementare Ajax su WordPress è breve, poche righe.
La nostra richiesta Ajax può essere destinata ad una pagina amministrativa di Backend, per un plugin ad esempio, oppure ad una pagina di FrontEnd.
In entrambi i casi Ajax migliorerà la velocità di esecuzione, rispetto ad altri metodi.
Il test Ajax, Backend e Frontend è inserito dentro MinimumPlugin ( demo ).

Si tratti di Backend o di FrontEnd sono sempre indispensabili due frammenti di codice:
– Un frammento misto, in html e javascript, per inviare la richiesta ajax al server e, successivamente, gestire la risposta che arriva.
– Una funzione php che esegue l’elaborazione e invia la risposta.

Backend, HTML
<div class="wrap">
   <hr class="wp-block-separator">
   <h4>Test Ajax Backend</h4>
   <input type="text" name="mpAjax_BKT" id="mp_AjaxBKT" title="Background Ajax Test" placeholder="Input something">
   <button id="mpAjax_BKcall" class="button button-primary">Press me for Test</button>
   <p id="mpAjax_BKR"></p>
</div>

Il nostro test prevede un campo di input id=”mp_AjaxBKT” per digitare una cosa qualsiasi,
un bottone id=”mpAjax_BKcall” per inviare il nostro contenuto al server
e un paragrafo con id=”mpAjax_BKR” che conterrà la risposta del server.

Backend, Javascript con jQuery
<script>
jQuery(document).ready(function(){            
    jQuery('#mpAjax_BKcall').click(function(){
        jQuery.ajax({
            url: ajaxurl,
            method: 'POST',
            data: {
                'action':'mp_ajaxBK', 
                'mp_AjaxBKT': mp_AjaxBKT.value
            },
            success: function(response){ mpAjax_BKR.innerHTML = response;},
            error: function(){ alert('ajax error. See the Console Log!'); }
        });
   });            
});
</script>

Lo script si avvia quando viene premuto il bottone Press me
jQuery('#mpAjax_BKcall').click(function(){
che istanzia i metodi di jQuery per ajax.

url: ajaxurl, indirizzo del punto di ingresso di WP per Ajax . ajaxurl è un indirizzo che WordPress imposta automaticamente in tutte le pagine amministrative. Esempio: var ajaxurl = '/wp-admin/admin-ajax.php'

'action':'mp_ajaxBK', action con la quale WP chiamerà la nostra funzione php mp_AjaxBKG()

'mp_AjaxBKT': mp_AjaxBKT.value è quello che abbiamo digitato nel campo di input. WP ne otterrà il valore con $_POST[ 'mp_AjaxBKT' ];

success: function(response){ mpAjax_BKR.innerHTML = response;}, scrive quello che abbiamo digitato nel paragrafo che abbiamo previsto e lasciato senza contenuto. Ajax ha funzionato bene.

error: function(){ alert('ajax error. See the Console Log!'); in caso di errore ajax compare una finestra di avviso.

Backend, php
add_action( 'wp_ajax_mp_ajaxBK', 'mp_AjaxBKG' ); 

function mp_AjaxBKG(){
   ( $ajaxInputBKG = sanitize_text_field($_POST[ 'mp_AjaxBKT' ])) OR 
   ( wp_die( 'No input or No valid input.' ) );
   echo $ajaxInputBKG;
   exit(); 
}

Dobbiamo collegare la action 'mp_ajaxBK' inviata da Javascript con la nostra funzione php mp_AjaxBKG() .
Facciamo questo usando uno degli “Hook” che caratterizzano WordPress, la funzione add_action()
Il file admin-ajax.php che raggiungiamo attraverso ajaxurl esamina la action 'mp_ajaxBK' e utilizzando add_action() dirige il flusso di WordPress alla funzione mp_AjaxBKG() che esegue l’elaborazione.

Elaborazione piuttosto semplice. Filtra il valore del campo di input per evitare contenuti non validi e reinvia il contenuto medesimo, che diventa response del server e sarà sistemato nell’elemento Html che abbiamo predisposto.
La funzione si chiude con exit() , obbligatoriamente per evitare errori imprevedibili.

Frontend, HTML
<h4>Test Ajax FrontEnd</h4>
<input type="text" name="mpAjax_FT" id="mp_AjaxFT" title="FrontEnd Ajax Test" placeholder="Input something">
<button id="mpAjax_Fcall" class="button button-primary">Press me for Test</button>
<p id="mpAjax_FR"></p>

Html del Frontend è eguale a quello del Backend.
Cambiano solo i nomi delle classi degli elementi html.

Frontend, Javascript nativo senza jQuery.
<?php
$nonce = wp_create_nonce( 'MinimumPlugin' );            /*   Create nonce */
$ajaxURL = admin_url( 'admin-ajax.php', 'relative' );   /* get the ajax input address in wp */ 
?>

<script>
var mpF_nonce = '{$nonce}';
var mpF_axUrl = '{$ajaxURL}';

document.getElementById('mpAjax_Fcall').addEventListener("click", function(){
    function AjaxVar(){var xhr; if(window.ActiveXObject) {xhr = new ActiveXObject;} else {xhr = new XMLHttpRequest;} return xhr;}
    
    var fd = new FormData();
    fd.append( 'action', 'mp_ajaxF' );
    fd.append( 'ajax_nonce', mpF_nonce );
    fd.append( 'mp_AjaxFT', mp_AjaxFT.value );
    
    var xhr = AjaxVar();
    
    xhr.addEventListener("load", Complete);
    xhr.addEventListener("error", Err);
    xhr.addEventListener("abort", Abor);
    
    xhr.open('POST', mpF_axUrl);
    xhr.send(fd);    
    
    function Complete(){ document.getElementById('mpAjax_FR').innerHTML = xhr.responseText; }
    
    function Err(){ document.getElementById('mpAjax_FR').innerHTML = document.getElementById('mpAjax_FR').innerHTML + '<br>ajax Error ... ' + xhr.status + ' ' + xhr.statusText;  }
    
    function Abor(){ document.getElementById('mpAjax_FR').innerHTML = document.getElementById('mpAjax_FR').innerHTML + '<br>ajax Abort ... ' + xhr.status + ' ' + xhr.statusText; }
});
</script>

Per il Frontend abbiamo bisogno di ulteriori 2 righe in php per impostare 2 variabili da passare a Javascript. Indispensabili.

$nonce = wp_create_nonce( 'MinimumPlugin' );
Ajax in Frontend richiede maggiori precauzioni del Backend, quindi creiamo un “nonce” di WordPress.
$ajaxURL = admin_url( 'admin-ajax.php', 'relative' );
WP non traccia automaticamente il proprio punto di ingresso per Ajax nel Frontend.
Impostiamo manualmente l’indirizzo del file admin-ajax.php

Nella maggioranza dei casi la chiamata Ajax è fatta con jQuery che WP carica sempre. Con jQuery il codice è più piccolo, però in alcuni casi sarà necessario javascript nativo, che, comunque, è sempre un bit più veloce.
var mpF_nonce = '{$nonce}';
var mpF_axUrl = '{$ajaxURL}';

Passaggio di “nonce” e dell’ “url” a Javascript (sintassi Heredoc).

document.getElementById('mpAjax_Fcall').addEventListener(...)
Listener per il “click” sul bottone di invio.

function AjaxVar()
Ritorna un elemento XMLHttpRequest o ActiveXObject , in base al Browser dell’utente.
var xhr = AjaxVar();

var fd = new FormData();
fd.append( 'action', 'mp_ajaxF' );
fd.append( 'ajax_nonce', mpF_nonce );
fd.append( 'mp_AjaxFT', mp_AjaxFT.value );

Istanziamo un oggetto FormData di Javascript.
Potremo leggere i valori inviati con la solita istruzione $_POST[] del php.
Come nel Backend inviamo la ‘action’, stavolta riservata al solo Frontend
e inviamo il valore del campo di input.
Inviamo anche il ‘nonce’ per eseguire lato server una verifica di regolarità.

xhr.addEventListener("load", Complete); // Ajax complete
xhr.addEventListener("error", Err); // Ajax Errors
xhr.addEventListener("abort", Abor); // Ajax abort

Sono tre listener che si attivano successivamente alla richiesta Ajax e sono destinati a gestire le possibili risposte. Se tutto è ok la funzione Complete scriverà l’input precedentemente inserito nell’apposito elemento html.

xhr.open('POST', mpF_axUrl);
xhr.send(fd);
Finalmente l’invio vero e proprio della richiesta Ajax.
Vengono inviati, in maniera asincrona, i tre valori di FormData, con il metodo POST , all’ url mpF_axUrl . Il browser si pone in attesa di ricevere una risposta dal server.

Frontend, php

add_action( 'wp_ajax_nopriv_mp_ajaxF', 'mp_AjaxFD');
Registra una action cioè mp_ajaxF valida per gli utenti che non hanno fatto il LogIn.

add_action('wp_ajax_mp_ajaxF', 'mp_AjaxFD');
Registra la stessa action, mp_ajaxF per gli utenti che hanno fatto il LogIn.
Senza questa seconda registrazione Ajax di Frontend non funziona per gli amministratori del sito loggati.

function mp_AjaxFD() {
$nonce = sanitize_text_field( $_POST[ 'ajax_nonce' ]);
if( !wp_verify_nonce( $nonce, 'MinimumPlugin' )){
wp_die( '403 forbidden', 403 );
}
( $ajaxInputF = sanitize_text_field($_POST[ 'mp_AjaxFT' ])) OR ( wp_die( 'No input or No valid input.' ));
echo $ajaxInputF;
exit();
}

L’elaborazione è la stessa del Backend con l’unica differenza che stavolta viene esaminato il nonce con wp_verify_nonce . Se non è valido il response Ajax è forbidden e WP imposta anche una header corrispondente.

Riferimenti: [ 1 ] [ 2 ]