WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

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

130

Вы хотите внедрить 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

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

Таблица wp_states

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

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

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

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее