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.
<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.
<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.
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 gli “Hooks”, che caratterizzano WordPress.
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.
<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.
<?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);Finalmente l’invio vero e proprio della richiesta Ajax.
xhr.send(fd);
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.
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.
