Как использовать jQuery Ajax в WordPress

Последнее обновление Июл 12, 2021

Содержание

Вы хотите внедрить jQuery Ajax в WordPress? Новички WordPress всегда сталкиваются с трудностями при использовании Ajax с WordPress. В этой статье мы изучаем, как использовать Ajax в WordPress, на живом примере.

Зачем нужен jQuery Ajax на сайте?

Ajax (асинхронный JavaScript и XML) позволяет веб-странице обновляться асинхронно. Это означает, что данные можно отправлять и получать с сервера асинхронно, не мешая отображению и поведению существующей страницы. Используя Ajax, вы можете изменять небольшие или большие части веб-страницы, не обновляя всю страницу. Это помогает улучшить взаимодействие с пользователем и в то же время снижает дополнительную нагрузку на сервер.

Ajax становится чрезвычайно популярным в веб-разработке. Большинство веб-сайтов предпочитают использовать Ajax для динамической загрузки контента. В веб-разработке для нескольких задач вам придется использовать Ajax без какой-либо второй возможности.

Сказав это, давайте посмотрим, как использовать jQuery Ajax в WordPress.

Начиная

Внедрить Ajax в WordPress легко и просто. Мы увидим это на практическом примере. В качестве примера возьмем поток раскрывающихся списков стран и штатов. Когда пользователь выбирает страну из раскрывающегося списка, все штаты, назначенные выбранной стране, должны быть заполнены в раскрывающемся списке штатов. Такое поведение должен выполнять Ajax.

Для этого вам потребуются 2 таблицы – wp_countries и wp_states. В этих таблицах следует сохранять отношения “один ко многим” между страной и штатами. См. Скриншоты ниже.

Таблица wp_countries

Таблица wp_states

Когда вы будете готовы с данными, создайте раскрывающийся список страны, извлекая данные из таблицы стран, как показано ниже.

<?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>
?>

Мы добавили класс «страны» в тег select, который будет использоваться в коде jQuery для получения идентификатора страны. Я также добавил пустой div с классом load-states, к которому добавляется раскрывающийся список состояний после получения ответа от вызова Ajax.

jQuery Ajax в WordPress

Затем нам нужно написать код jQuery, который отправляет вызов Ajax серверу и обрабатывает ответ. Для написания вызова Ajax вы должны включить файл JS. Создайте custom.jsфайл в jsкаталоге вашей активной темы. Добавьте это custom.jsв среду WordPress, используя приведенный ниже код, который находится внутри 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' );

Теперь давайте напишем код jQuery, который выдает вызов Ajax и добавляет на страницу раскрывающееся меню состояния.

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);
            });
        }
    });
});

Здесь я объявил dataпеременную, содержащую actionключ. Строковое значение actionключа должно быть ориентировано на задачу. Мы получаем состояния, поэтому я сохраняю его имя как get_states_by_ajax. Другие элементы dataпеременной – это детали, которые следует отправлять в запросы Ajax. Наша цель – получить состояние на основе страны, поэтому я передаю идентификатор страны с ключом as country.

Пришло время выполнять вызовы Ajax в стиле WordPress. Добавьте следующие 2 утверждения в файл активной темы functions.php.

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 – это фиксированный префикс при использовании Ajax в WordPress. Затем добавьте к нему значение действия. В нашем случае это get_states_by_ajax. Итак, первым параметром стал wp_ajax_get_states_by_ajax. Второй параметр – это функция обратного вызова, в которой мы должны написать наш фактический серверный код. ‘wp_ajax_nopriv’ следует использовать, когда вы выполняете операции для внешнего интерфейса.

В get_states_by_ajax_callbackметоде напишите код, который вернет раскрывающееся меню состояния. Вы можете определить этот метод в functions.phpфайле.

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();
}

Ответ, встроенный в код, отправит его обратно в jQuery. Затем этот ответ мы добавляем с помощью jQuery к контейнеру div, который имеет класс load-state.

Зайдите на свою страницу и выберите страну. Вы должны увидеть раскрывающееся меню состояния для выбранной страны.

Надеюсь, вы понимаете, как использовать Ajax на веб-сайте WordPress. Пожалуйста, поделитесь своими мыслями и предложениями в разделе комментариев ниже.

Статьи по Теме

Источник записи: artisansweb.net