...
✅ Nowości, motywy, wtyczki WEB i WordPress. Tutaj dzielimy się wskazówkami i najlepszymi rozwiązaniami dla stron internetowych.

Jak korzystać z jQuery Ajax w WordPress

27

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

Jak korzystać z jQuery Ajax w WordPress

Tabela wp_states

Jak korzystać z jQuery Ajax w WordPress

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.jsplik w jskatalogu aktywnego motywu. Dodaj to custom.jsw ś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 datazmienną, która zawiera actionklucz. Wartość ciągu dla actionklucza powinna być zorientowana na zadanie. Pobieramy stany, więc zachowam jego nazwę jako get_states_by_ajax. Innymi elementami datazmiennej 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.phppliku 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_callbackmetodzie napisz kod, który zwróci listę rozwijaną stanu. Możesz zdefiniować tę metodę w functions.phppliku.

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

Źródło nagrywania: artisansweb.net

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów