Создание 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', [], THEME_VERSION );
	/**
	 * AJAX
	 */
	wp_localize_script( 'app-core', 'ajax',
		[
			'url' => admin_url('admin-ajax.php'),
			'nonce' => wp_create_nonce('ajax-nonce')
		]
	);
}

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

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

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

Параметр 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(document).ready(function($) {
    $( "#ajax-request" ).click(function() {
        var data = {
            action: 'request',
            nonce: ajax.nonce
        };
        jQuery.post( ajax.url, data, function(response) {
            alert(`Сейчас: ` + response);
        });
    });
});

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

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

let button = document.getElementById('ajax-request');
button.addEventListener('click', request);
async function request() {
    const data = new FormData();
    data.append('nonce', ajax.nonce);
    data.append('action', 'request');
    const request = await fetch(ajax.url, { method: 'POST', body: data });
    const response = await request.text();
    alert(`Сейчас: ` + response);
}

HTML:

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

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

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

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

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

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