AJAX \u00e8 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.<\/p>\n
La maggior parte di voi probabilmente ha familiarit\u00e0 con l’esecuzione di richieste AJAX al di fuori di WordPress e desidera esaminare come farlo in WordPress. Potresti chiederti le seguenti domande:<\/p>\n
In WordPress puoi eseguire richieste AJAX in admin e\/o frontend; il processo \u00e8 lo stesso con alcune differenze nella risposta alle domande di cui sopra. Entriamo subito!<\/p>\n
La prima cosa di cui hai bisogno \u00e8, ovviamente, il javascript a cui vuoi inviare la richiesta AJAX. Dovrebbe essere accodato utilizzando un metodo valido per aggiungere script a WordPress<\/a>, frontend o backend. Molto probabilmente hai gi\u00e0 impostato uno script in cui hai solo bisogno della parte dell’invio o della richiesta di qualcosa da WordPress.<\/p>\n La pubblicazione di AJAX in WordPress richiede il passaggio di una variabile oggetto Javascript come dati alla richiesta. Nell’oggetto \u00e8 necessario fornire come minimo un immobile; ‘ 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\u00e9 AJAX \u00e8 gi\u00e0 integrato nelle schermate di amministrazione di WordPress, puoi semplicemente utilizzare la variabile globale Per gestire le richieste AJAX in PHP, ti colleghi all’azione Entriamo subito nel codice. Inizieremo con come aggiungere richieste AJAX nel pannello di amministrazione.<\/p>\n Presumo che tu abbia gi\u00e0 accodato uno script che reagisce ad alcune azioni dell’utente, raccoglie dati ed \u00e8 pronto per eseguire una richiesta AJAX, sia per aggiornare qualcosa, sia per richiedere alcune informazioni da WordPress. Il codice seguente \u00e8 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.<\/p>\n 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 Inoltre, come accennato in precedenza, poich\u00e9 AJAX \u00e8 gi\u00e0 integrato nelle schermate di amministrazione di WordPress, puoi semplicemente utilizzare la variabile globale Ora aggiungeremo il codice per accettare questa richiesta AJAX in PHP. Poich\u00e9 ho fornito " 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 \u00c8 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 Un’ultima nota importante sull’ultima riga; Il processo di esecuzione di AJAX nel frontend \u00e8 lo stesso dell’amministratore, ma un po’ pi\u00f9 complicato nel rispondere alla domanda 1: a quale URL dovrebbe pubblicare AJAX. Nell’esempio precedente per l’esecuzione di AJAX in admin avevamo gi\u00e0 una variabile Javascript globale, Quando si accoda uno script frontend che eseguir\u00e0 richieste AJAX nel proprio tema o plug-in, \u00e8 necessario passare l’URL AJAX di WordPress come variabile a quel Javascript, utilizzando Ora, nel tuo Javascript hai accesso a un oggetto Javascript globale Quando si ha a che fare con AJAX nel frontend c’\u00e8 un’altra cosa da tenere a mente riguardo all’hook che usi per accettare le richieste AJAX. Ti colleghi ancora a Per quanto riguarda il contenuto della tua funzione agganciata AJAX, \u00e8 lo stesso delle richieste dell’amministratore. Hai accesso completo a WordPress, ottieni le variabili passate da Poich\u00e9 AJAX semplifica il passaggio dei dati tra script e back-end, dovresti assolutamente prendere i passaggi necessari per rendere sicuro il tuo codice. Ci\u00f2 include la sanificazione di tutti i dati prima di salvarli, ma anche l’utilizzo della funzionalit\u00e0 "nonce" di WordPress per verificare se le richieste provengono da posizioni corrette e accettate. Leggi la documentazione di WordPress su nonce<\/a> se non hai familiarit\u00e0 con essa.<\/p>\n La premessa di base \u00e8 questa; utilizzi un metodo WordPress generando un valore nonce ( Aggiungiamo un po’ di sicurezza al codice di esempio che abbiamo fatto sopra. Per prima cosa genereremo un nonce e lo passeremo nel nostro Ci\u00f2 che viene passato come ‘ E infine nella nostra action<\/code>‘. Il valore della action<\/code>propriet\u00e0 ‘ ‘ \u00e8 una stringa che pu\u00f2 essere (quasi) qualsiasi cosa tu voglia. Questa azione \u00e8 ci\u00f2 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.<\/p>\najaxurl<\/code>. Ma per le richieste frontend diventa un po’ pi\u00f9 complicato perch\u00e9 \u00e8 necessario fornire manualmente l’URL AJAX insieme al proprio Javascript. Altro su quello di seguito.<\/p>\nwp_ajax_<your action name><\/code>. Se desideri eseguire richieste AJAX nel frontend per utenti non registrati, puoi anche collegarti a wp_ajax_nopriv_<your action name><\/code>. Altro su quello di seguito. All’interno della tua funzione agganciata puoi accedere ai dati passati da Javascript facendo riferimento $_POST<\/code>all’array. Per restituire qualcosa, fai semplicemente eco a qualcosa. Questa \u00e8 la risposta breve alla domanda 2 sopra.<\/p>\nEsecuzione di richieste AJAX nell’amministratore di WordPress<\/h2>\n
add_action('admin_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '\/assets\/js\/awhitepixel-ajax.js', ['jquery'], '', true);\n});<\/code><\/pre>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_send_something',\n 'something': 'Hello world',\n 'another_thing': 14\n }\n $.post(ajaxurl, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\naction<\/code>propriet\u00e0 ‘ ‘.<\/p>\najaxurl<\/code>come URL AJAX.<\/p>\nawhitepixel_send_something<\/code>" come valore di action<\/code>", ho bisogno di agganciarmi wp_ajax_awhitepixel_send_something<\/code>.<\/p>\nadd_action('wp_ajax_awhitepixel_send_something', function() {\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n\u00a0\n wp_die();\n});<\/code><\/pre>\n$wpdb<\/code>. per query di database). Tutte le variabili che hai passato in Javascript saranno disponibili all’interno $_POST<\/code>dell’array con le chiavi che hai fornito nell’oggetto Javascript.<\/p>\necho<\/code>il tuo output. Per l’output di variabili pi\u00f9 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;<\/p>\n$pass_back = ['something' => 'a value', 'another_thing' => 42];\necho json_encode($pass_back);<\/code><\/pre>\nwp_die()<\/code>. Tutte le funzioni di callback AJAX dovrebbero "chiudere il thread" o terminare correttamente eseguendo die()<\/code>o exit()<\/code>. In WordPress utilizziamo wp_die()<\/code>per una corretta integrazione ma il risultato \u00e8 lo stesso. Se ti capita di ottenere uno strano "0" nelle tue risposte AJAX, \u00e8 molto probabile che tu non ha fatto wp_die()<\/code>o die()<\/code>.Sempre, assicurati sempre "muori" alla fine di tutte le funzioni agganciate a wp_ajax<\/code>.<\/p>\nEsecuzione di richieste AJAX nel frontend di WordPress<\/h2>\n
ajaxurl<\/code>, ma questa variabile non \u00e8 disponibile frontend. Dobbiamo fornirlo noi stessi. Per ottenere il valore dell’URL AJAX di WordPress che utilizzi admin_url('admin-ajax.php')<\/code>(s\u00ec, "URL amministratore" per frontend).<\/p>\nwp_localize_script()<\/code>.<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php')\n ];\n wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\nTheme_Variables<\/code>(questo nome pu\u00f2 essere qualsiasi cosa tu voglia), con l’URL AJAX di WordPress come valore per ajax_url<\/code>la propriet\u00e0 ‘ ‘. La tua funzione AJAX sarebbe qualcosa del genere:<\/p>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_frontend_stuff',\n 'something': 'Hello world',\n 'another_thing': 14\n }\n $.post(Theme_Variables.ajax_url, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\nwp_ajax_<your action name><\/code>, ma questo hook funzioner\u00e0 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><\/code>. Normalmente per le richieste AJAX front-end necessarie per il corretto funzionamento del tema, ti collegherai a entrambi, indirizzandoli entrambi alla stessa funzione.<\/p>\nadd_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n wp_die();\n}<\/code><\/pre>\n$_POST<\/code>, facoltativamente restituisci qualcosa eseguendo echo<\/code>e dovresti sempre, sempre ricordarti di "morire" con wp_die()<\/code>alla fine.<\/p>\nProtezione delle tue richieste AJAX<\/h2>\n
wp_create_nonce()<\/code>) o generando un campo di input nascosto con il valore nonce (wp_nonce_field()<\/code>). Nella tua richiesta AJAX trasmetti il \u200b\u200bvalore nonce (che \u00e8 codificato da WordPress) nella richiesta e nella parte accettante (wp_ajax_<\/code>hook) verifichi il nonce con quello che hai impostato originariamente.<\/p>\nwp_localize_script<\/code>insieme all’URL AJAX. Come parametro per wp_create_nonce()<\/code>impostare una stringa univoca che solo noi dovremmo conoscere, per cos\u00ec dire. Nell’esempio seguente vado per ‘ awhitepixel-nonce<\/code>‘.<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php'),\n 'nonce' => wp_create_nonce('awhitepixel-nonce')\n ];\n wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\nnonce<\/code>‘ nelle nostre variabili Javascript al frontend \u00e8 un numero casuale generato da WordPress. Nessuno tranne noi, autori di questo script, sa che il nonce valido \u00e8 ‘ awhitepixel-nonce<\/code>‘. Nel nostro Javascript, raccogliamo il valore nonce e lo ritrasmettiamo nella nostra richiesta AJAX:<\/p>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_frontend_stuff',\n 'something': 'Hello world',\n 'another_thing': 14,\n 'nonce': Theme_Variables.nonce\n }\n $.post(Theme_Variables.ajax_url, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\nwp_ajax<\/code>funzione hook dovremmo iniziare controllando se il nonce era valido con wp_verify_nonce()<\/code>. Forniamo la stringa univoca che abbiamo impostato sopra e se WordPress non corrisponde al valore codificato univoco trasmesso con questa stringa, terminiamo immediatamente:<\/p>\nadd_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {\n wp_die(-1);\n }\n\u00a0\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n wp_die();\n}<\/code><\/pre>\n