{"id":25437,"date":"2021-05-31T11:17:00","date_gmt":"2021-05-31T08:17:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25437"},"modified":"2021-10-18T03:06:56","modified_gmt":"2021-10-18T00:06:56","slug":"come-utilizzare-jquery-ajax-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-utilizzare-jquery-ajax-in-wordpress\/","title":{"rendered":"Come utilizzare jQuery Ajax in WordPress"},"content":{"rendered":"

Vuoi implementare jQuery Ajax in WordPress? I principianti di WordPress trovano sempre difficolt\u00e0 nell’usare Ajax con WordPress. In questo articolo, studiamo come utilizzare Ajax in WordPress prendendo un esempio dal vivo.<\/p>\n

Perch\u00e9 \u00e8 necessario jQuery Ajax nel sito Web?<\/h3>\n

Ajax (Asynchronous JavaScript And XML) consente a una pagina Web di aggiornarsi in modo asincrono. Significa che i dati possono essere inviati e recuperati da un server in modo asincrono senza interferire con la visualizzazione e il comportamento della pagina esistente. Usando Ajax, puoi modificare piccole o grandi parti di una pagina web senza aggiornare l’intera pagina. Aiuta a migliorare l’esperienza dell’utente e allo stesso tempo consente di risparmiare un carico aggiuntivo sul server.<\/p>\n

Ajax diventa estremamente popolare nello sviluppo web. La maggior parte dei siti Web preferisce utilizzare Ajax per caricare il contenuto in modo dinamico. Nello sviluppo web per alcune attivit\u00e0, devi utilizzare Ajax senza alcuna seconda opzione.<\/p>\n

Detto questo, vediamo come utilizzare jQuery Ajax in WordPress.<\/p>\n

Iniziare<\/h3>\n

L’implementazione di Ajax in WordPress \u00e8 facile e diretta. Ne vedremo un esempio pratico. Ad esempio, prendiamo un flusso di menu a discesa di paesi e stati. Quando l’utente seleziona un Paese dall’elenco a discesa, tutti gli stati assegnati al Paese selezionato devono essere compilati nell’elenco a discesa degli stati. Questo comportamento deve essere eseguito da Ajax.<\/p>\n

Per ottenerlo avrai bisogno di 2 tabelle: wp_countries e wp_states. In queste tabelle, dovresti mantenere la relazione uno a molti tra paese e stati. Fare riferimento agli screenshot seguenti.<\/p>\n

Tabella wp_countries<\/strong><\/p>\n

\"Come<\/a><\/p>\n

Tabella wp_states<\/strong><\/p>\n

\"Come<\/a><\/p>\n

Una volta che sei pronto con i dati, crea il menu a discesa del paese recuperando i dati dalla tabella dei paesi come segue.<\/p>\n

<?php\nglobal $wpdb;\n$aCountries = $wpdb->get_results( \"SELECT id, country FROM \".$wpdb->prefix.\"countries\" );\n\u00a0\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<select class=\"countries\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"\">--<?php _e('SELECT COUNTRY'); ?>--<\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach ($aCountries as $country) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $country->id; ?>\"><?php echo $country->country; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0<div class=\"load-state\"><\/div>\n<\/form>\n?><\/code><\/pre>\n
Abbiamo aggiunto la classe "paesi" al tag select che verr\u00e0 utilizzato nel codice jQuery per ottenere l’id di un paese. Ho anche aggiunto un div vuoto con la classe "load-states" a cui verr\u00e0 aggiunto il menu a discesa dello stato dopo aver ricevuto una risposta dalla chiamata Ajax.<\/p>\n
jQuery Ajax in WordPress<\/h3>\n
Successivamente, dobbiamo scrivere un codice jQuery che dia una chiamata Ajax al server e gestisca la risposta. Per scrivere una chiamata Ajax, dovresti includere il file JS. Crea un custom.js<\/code>file nella js<\/code>directory del tuo tema attivo. Aggiungi questo custom.js<\/code>nell’ambiente WordPress usando il codice seguente che va all’interno di functions.php<\/code>.<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'load_states' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
Ora scriviamo un codice jQuery che dia una chiamata Ajax e aggiungiamo il menu a discesa dello stato alla pagina.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '.countries', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var countryid = $(this).val();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(countryid != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'get_states_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'country': countryid,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.load-state').html(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Qui, ho dichiarato una data<\/code>variabile che contiene una action<\/code>chiave. Il valore della stringa per la action<\/code>chiave dovrebbe essere orientato all’attivit\u00e0. Stiamo recuperando gli stati, quindi mantengo il nome come get_states_by_ajax. Altri elementi di data<\/code>variabile sono i dettagli da inviare alle richieste Ajax. Il nostro obiettivo \u00e8 recuperare uno stato in base al paese, quindi sto passando l’ID paese con la chiave come country<\/code>.<\/p>\n
Ora \u00e8 il momento di eseguire chiamate Ajax in modo WordPress. Aggiungi le seguenti 2 affermazioni nel functions.php<\/code>file del tuo tema attivo .<\/p>\n
add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');\nadd_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');<\/code><\/pre>\n
‘wp_ajax’ \u00e8 un prefisso fisso durante l’utilizzo di Ajax in WordPress. Quindi aggiungi il valore dell’azione ad esso. Nel nostro caso \u00e8 get_states_by_ajax. Quindi, il primo parametro \u00e8 diventato wp_ajax_get_states_by_ajax. Il secondo parametro \u00e8 una funzione di callback in cui dobbiamo scrivere il nostro codice effettivo lato server. ‘wp_ajax_nopriv’ dovrebbe essere usato quando si eseguono operazioni per il front-end.<\/p>\n
Nel get_states_by_ajax_callback<\/code>metodo, scrivi il codice che restituir\u00e0 il menu a discesa dello stato. Puoi definire questo metodo in functions.php<\/code>file.<\/p>\n
function get_states_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_states', 'security');\n\u00a0\u00a0\u00a0\u00a0$country = $_POST['country'];\n\u00a0\u00a0\u00a0\u00a0global $wpdb;\n\u00a0\u00a0\u00a0\u00a0$aStates = $wpdb->get_results( $wpdb->prepare( \"SELECT id, state_name FROM \".$wpdb->prefix.\"states WHERE cid = %d\", $country) );\n\u00a0\u00a0\u00a0\u00a0if ($aStates) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($aStates as $state) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $state->id; ?>\"><?php echo $state->state_name; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
La risposta incorporata nel codice la rimander\u00e0 a jQuery. Questa risposta viene quindi aggiunta utilizzando jQuery al contenitore div che ha la classe ‘load-state’.<\/p>\n
Vai alla tua pagina e scegli il paese. Dovresti vedere il menu a discesa dello stato per il paese selezionato.<\/p>\n
Spero che tu capisca come utilizzare Ajax sul sito Web di WordPress. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n