Hur man använder jQuery Ajax i WordPress
Vill du implementera jQuery Ajax i WordPress? WordPress-nybörjare har alltid svårt att använda Ajax med WordPress. I den här artikeln studerar vi hur man använder Ajax i WordPress genom att ta ett liveexempel.
Varför behöver jQuery Ajax på webbplatsen?
Ajax (Asynchronous JavaScript And XML) tillåter en webbsida att uppdateras asynkront. Det betyder att data kan skickas och hämtas från en server asynkront utan att störa visningen och beteendet på den befintliga sidan. Med Ajax kan du ändra små eller stora delar av en webbsida utan att uppdatera hela sidan. Det hjälper till att förbättra användarupplevelsen och sparar samtidigt en extra belastning på servern.
Ajax blir extremt populärt inom webbutveckling. De flesta webbplatser föredrar att använda Ajax för att ladda innehållet dynamiskt. I webbutveckling för några uppgifter måste du använda Ajax utan något andra alternativ.
Med detta sagt, låt oss se hur man använder jQuery Ajax i WordPress.
Komma igång
Det är enkelt och enkelt att implementera Ajax i WordPress. Vi kommer att se ett praktiskt exempel på det. Som ett exempel, låt oss ta ett flöde av land- och delstatsnedgångar. När användaren väljer ett land från rullgardinsmenyn ska alla stater som tilldelats det valda landet fyllas i rullgardinsmenyn. Detta beteende måste göras av Ajax.
För att uppnå det behöver du två tabeller – wp_countries och wp_states. I dessa tabeller bör du behålla förhållandet mellan många och länder. Se nedanstående skärmdumpar.
Tabell wp_countries
Tabell wp_status
När du är redo med data skapar du rullgardinsmenyn för land genom att hämta data från landstabellen enligt följande.
<?php
global $wpdb;
$aCountries = $wpdb->get_results( "SELECT id, country FROM ".$wpdb->prefix."countries" );
<form method="post">
<select class="countries">
<option value="">--<?php _e('SELECT COUNTRY'); ?>--</option>
<?php foreach ($aCountries as $country) { ?>
<option value="<?php echo $country->id; ?>"><?php echo $country->country; ?></option>
<?php } ?>
</select>
<div class="load-state"></div>
</form>
?>Vi har lagt till klassen ‘länder’ i den valda taggen som kommer att användas i jQuery-koden för att få id för ett land. Jag lade också till en tom div med klassens ” load-states ” som rullgardinsmenyn för tillstånd kommer att läggas till efter att jag fått ett svar från Ajax-samtalet.
jQuery Ajax i WordPress
Därefter måste vi skriva en jQuery-kod som ger ett Ajax-samtal till servern och hanterar svaret. För att skriva ett Ajax-samtal bör du inkludera JS-filen. Skapa en custom.jsfil i jskatalogen för ditt aktiva tema. Lägg till detta custom.jsi WordPress-miljö med hjälp av nedanstående kod som går in i functions.php.
function blog_scripts() {
// Register the script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_states' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );Nu ska vi skriva en jQuery-kod som ger ett Ajax-samtal och lägga till rullgardinsmenyn på sidan.
custom.js
jQuery(function($) {
$('body').on('change', '.countries', function() {
var countryid = $(this).val();
if(countryid != '') {
var data = {
'action': 'get_states_by_ajax',
'country': countryid,
'security': blog.security
}
$.post(blog.ajaxurl, data, function(response) {
$('.load-state').html(response);
});
}
});
});Här förklarade jag en datavariabel som innehåller en actionnyckel. Strängvärdet för actionnyckeln bör vara uppgiftsorienterat. Vi hämtar stater så jag behåller namnet get_states_by_ajax. Andra element av datavariabel är detaljer som ska skickas till Ajax-förfrågningar. Vårt mål är att hämta en stat baserad på land, så jag skickar land-id med nyckeln som country.
Nu är det dags att utföra Ajax-samtal på ett WordPress-sätt. Lägg till nedanstående 2 uttalanden i functions.phpfilen för ditt aktiva tema .
add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');
add_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');‘wp_ajax’ är ett fast prefix när du använder Ajax i WordPress. Lägg sedan till åtgärdens värde till den. I vårt fall är det get_states_by_ajax. Så den första parametern blev wp_ajax_get_states_by_ajax. Den andra parametern är en återuppringningsfunktion där vi måste skriva vår faktiska server-sida-kod. ‘wp_ajax_nopriv’ ska användas när du gör operationer för frontend.
I get_states_by_ajax_callbackmetoden skriver du koden som returnerar rullgardinsmenyn för tillståndet. Du kan definiera den här metoden i functions.phpfil.
function get_states_by_ajax_callback() {
check_ajax_referer('load_states', 'security');
$country = $_POST['country'];
global $wpdb;
$aStates = $wpdb->get_results( $wpdb->prepare( "SELECT id, state_name FROM ".$wpdb->prefix."states WHERE cid = %d", $country) );
if ($aStates) {
?>
<select>
<?php
foreach ($aStates as $state) {
?>
<option value="<?php echo $state->id; ?>"><?php echo $state->state_name; ?></option>
<?php
}
?>
</select>
<?php
}
wp_die();
}Svaret inbyggt i koden skickar det tillbaka till jQuery. Detta svar lägger vi sedan till med hjälp av jQuery till div-behållaren som har klass ‘load-state’.
Gå till din sida och välj land. Du bör se att rullgardinsmenyn för staten visas för det valda landet.
Jag hoppas att du förstår hur du använder Ajax på WordPress-webbplatsen. Dela dina tankar och förslag i kommentarsektionen nedan.
relaterade artiklar
- Hur man laddar WordPress-inlägg med AJAX
- Hur man integrerar Ajax-filöverföring i WordPress
- Hur man använder jQuery Autocomplete med Ajax