Jak korzystać z jQuery Ajax w WordPress
Chcesz zaimplementować jQuery Ajax w WordPressie? Początkujący WordPress zawsze mają trudności z używaniem Ajax z WordPress. W tym artykule uczymy się, jak używać Ajax w WordPressie, biorąc przykład na żywo.
Dlaczego potrzebujesz jQuery Ajax w witrynie?
Ajax (asynchroniczny JavaScript i XML) umożliwia asynchroniczną aktualizację strony internetowej. Oznacza to, że dane mogą być wysyłane i pobierane z serwera asynchronicznie bez ingerencji w wyświetlanie i zachowanie istniejącej strony. Używając Ajax, możesz zmieniać małe lub duże części strony internetowej bez odświeżania całej strony. Pomaga poprawić wrażenia użytkownika, a jednocześnie oszczędza dodatkowe obciążenie serwera.
Ajax staje się niezwykle popularny w tworzeniu stron internetowych. Większość stron internetowych woli używać Ajax do dynamicznego ładowania treści. W tworzeniu stron internetowych dla kilku zadań, musisz używać Ajax bez żadnej drugiej opcji.
Powiedziawszy to, zobaczmy, jak korzystać z jQuery Ajax w WordPressie.
Pierwsze kroki
Wdrożenie Ajax w WordPressie jest łatwe i proste. Zobaczymy tego praktyczny przykład. Jako przykład weźmy listę rozwijanych krajów i stanów. Gdy użytkownik wybierze kraj z listy rozwijanej, wszystkie stany przypisane do wybranego kraju powinny zostać wypełnione na liście rozwijanej stanów. To zachowanie musi być wykonane przez Ajax.
Aby to osiągnąć będziesz potrzebował 2 tabel – wp_countries i wp_states. W tych tabelach należy zachować relację jeden do wielu między krajem a stanami. Zapoznaj się z poniższymi zrzutami ekranu.
Tabela wp_countries
Tabela wp_states
Gdy będziesz gotowy z danymi, zbuduj listę rozwijaną kraju, pobierając dane z tabeli krajów w następujący sposób.
<?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>
?>
Do tagu select dodaliśmy klasę „kraje", która będzie używana w kodzie jQuery w celu uzyskania identyfikatora kraju. Dodałem również pusty div z klasą ‘load-states’, do którego lista stanów zostanie dołączona po otrzymaniu odpowiedzi z wywołania Ajax.
jQuery Ajax w WordPressie
Następnie musimy napisać kod jQuery, który wysyła wywołanie Ajax do serwera i obsługuje odpowiedź. Aby napisać wywołanie Ajax, powinieneś dołączyć plik JS. Utwórz custom.js
plik w js
katalogu aktywnego motywu. Dodaj to custom.js
w środowisku WordPress za pomocą poniższego kodu, który wchodzi do środka 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' );
Teraz napiszmy kod jQuery, który daje wywołanie Ajax i dołącza listę rozwijaną stanu do strony.
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);
});
}
});
});
Tutaj zadeklarowałem data
zmienną, która zawiera action
klucz. Wartość ciągu dla action
klucza powinna być zorientowana na zadanie. Pobieramy stany, więc zachowam jego nazwę jako get_states_by_ajax. Innymi elementami data
zmiennej są szczegóły, które należy przesłać do żądań Ajax. Naszym celem jest pobranie stanu na podstawie kraju, więc identyfikator kraju przekazuję kluczem jako country
.
Teraz nadszedł czas na wykonanie wywołań Ajax w sposób WordPressa. Dodaj poniższe 2 stwierdzenia w functions.php
pliku aktywnego motywu .
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” to stały prefiks podczas używania Ajax w WordPressie. Następnie dodaj do niego wartość akcji. W naszym przypadku jest to get_states_by_ajax. Tak więc pierwszym parametrem stał się wp_ajax_get_states_by_ajax. Drugi parametr to funkcja zwrotna, w której musimy napisać nasz aktualny kod po stronie serwera. "wp_ajax_nopriv" powinien być używany podczas wykonywania operacji dla interfejsu użytkownika.
W get_states_by_ajax_callback
metodzie napisz kod, który zwróci listę rozwijaną stanu. Możesz zdefiniować tę metodę w functions.php
pliku.
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();
}
Odpowiedź wbudowana w kod odeśle go z powrotem do jQuery. Tę odpowiedź następnie dołączamy za pomocą jQuery do kontenera div, który ma klasę „load-state”.
Wejdź na swoją stronę i wybierz kraj. Powinieneś zobaczyć listę rozwijaną stanu dla wybranego kraju.
Mam nadzieję, że rozumiesz, jak korzystać z Ajax na stronie WordPress. Podziel się swoimi przemyśleniami i sugestiami w sekcji komentarzy poniżej.
Powiązane artykuły
- Jak załadować post WordPress za pomocą AJAX
- Jak zintegrować przesyłanie plików Ajax z WordPress
- Jak korzystać z autouzupełniania jQuery z Ajax