Создание AJAX запросов в WordPress на практических примерах

AJAX — технология взаимодействия PHP и JS/jQuery, которая позволяет получать информацию от сервера в фоновом режиме без перезагрузки страницы.

Методика построения запросов на основе AJAX доступна во многих системах управления контентом, и WordPress здесь не является исключением.

AJAX в клиентской части WordPress

Асинхронные запросы основе AJAX применяются для динамической загрузки контента в целях повышения отзывчивости пользовательского интерфейса.

Для создания и выполнения запроса в пользовательской части WordPress потребуется три компонента:

  • JS-код в клиентской части для запуска запроса с параметрами;
  • PHP-код в серверной части для обработки запроса и отправки результата.
  • HTML-элемент: форма, кнопка или ссылка.

Переменная ajaxurl

Самый оптимальный способ определить переменную ajaxurl — прикрепиться к одному из основных скриптов в теме оформления с применением функции локализации строки:

add_action('wp_footer', 'app_footer_scripts');

function app_footer_scripts() {
	wp_enqueue_script( 'app-core', get_template_directory_uri() . '/assets/js/app.min.js', array(), THEME_VERSION );
	/**
	 * AJAX
	 */
	wp_localize_script( 'app-core', 'ajax',
		array(
			'url' => admin_url('admin-ajax.php'),
			'nonce' => wp_create_nonce('ajax-nonce')
		)
	);
}

Комментарий: функция app_footer_scripts регистрирует в подвале страницы файл с JS-кодом. Для определения переменной с URL-адресом на который будут отправляться AJAX-запросы прикреплена функция локализации строки с двумя параметрами: url и nonce.

Для проверки корректности вывода, откройте исходный код страницы и проверьте наличие переменной. В этом примере, она будет расположена одной строкой выше от места подключения сценария:

Переменная ajaxurl в исходном коде страницы

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

Параметр nonce

В этом примере, кроме адреса для запросов был создан параметр nonce. Nonce-код — это строка с набором символом, которая может быть использована один раз.

В AJAX запросах проверка с применением nonce-кода используется, когда необходимо убедиться в том, что пользователь выполняет запрос из указанного места.

Создание запроса

WordPress предлагает два хука для определения AJAX-функций:

add_action( 'wp_ajax_(action)', 'my_function_name' );
add_action( 'wp_ajax_nopriv_(action)', 'my_function_name' );

Если ваш запрос предназначен для авторизованных пользователей, используйте хук wp_ajax_. В случае, если запрос является общедоступным используйте оба хука.

Для демонстрации принципов работы асинхронного запроса в WordPress, напишем функцию, результатом выполнения которой, будет показ текущего времени в окне браузера.

PHP:

<?php 

if( wp_doing_ajax() ) {
    add_action( 'wp_ajax_request', 'get_current_time' );
    add_action( 'wp_ajax_nopriv_request', 'get_current_time' );
}

function get_current_time() {
    if( ! wp_verify_nonce( $_POST['nonce'], 'ajax-nonce' ) ) die();
    echo date('h:i:s');
    wp_die();
}

?>
jQuery .post()
jQuery $.ajax()
JavaScript (без jQuery)
jQuery(document).ready(function($) {
    $( "#ajax-request" ).click(function() {
        var data = {
            action: 'request',
            nonce: ajax.nonce
        };
        jQuery.post( ajax.url, data, function(response) {
            alert('Сейчас: ' + response);
        });
    });
});

Функция $.ajax() лежит в основе всех Ajax запросов, но для простых задач она избыточна:

jQuery(document).ready(function($) {
    $( "#ajax-request" ).click(function() {
        $.ajax({
            type: 'POST',
            url: ajax.url,
            data: {
                action: 'request',
                nonce: ajax.nonce,
            },
            success: function (response) {
                alert('Сейчас: ' + response);
            }
        });        
    });
});

Пример Ajax запроса без применения библиотеки jQuery с помощью объекта XMLHttpRequest:

let button = document.getElementById('ajax-request');
button.addEventListener('click', () => {
    let xhr = new XMLHttpRequest();
    let params = '?action=request&nonce=' + ajax.nonce;
    xhr.open("GET", ajax.url + params, true);
    xhr.send();
    xhr.onload = function () {
        alert('Сейчас: ' + xhr.response);
    }
});

Комментарий: этот код выполняет передачу параметров запроса через URL методом GET. Вы можете использовать метод POST предварительно изменив PHP-код для проверки nonce-кода полученного из HTML-формы или другим методом. Более подробно о работе XHR читайте в справочнике по JavaScript.

HTML:

<button id="ajax-request">Который час?</button>

Работа над ошибками

В случае возникновения ошибки в процессе выполнения запроса, система вернет ответ с кодом ошибки:

Код Описание
-1 Код ошибки при проверке запроса.
0 Код ошибки по умолчанию для запросов без результата.

Показ ошибок в консоли DevTools

Для показа ошибок в консоли разработчика, добавьте код в functions.php:

<?php 
if( WP_DEBUG && WP_DEBUG_DISPLAY && (defined('DOING_AJAX') && DOING_AJAX) ) {
    @ ini_set( 'display_errors', 1 );
}
?>