Руководство: Как правильно использовать AJAX в WordPress

AJAX — это метод, который вы можете использовать в Javascript для получения данных с сервера и обновления содержимого вашей страницы без перезагрузки в браузере. В этом посте мы рассмотрим, как правильно использовать AJAX в WordPress.

Большинство из вас, вероятно, знакомы с выполнением запросов AJAX за пределами WordPress и хотят узнать, как это сделать в WordPress. Возможно, вас интересуют следующие вопросы:

1. На какой URL вы должны отправлять запросы AJAX в своем Javascript.
2. Как на самом деле поймать запрос AJAX в PHP, получить его данные и отправить что-то обратно.
3. Обеспечение безопасности ваших запросов AJAX.

В WordPress вы можете выполнять запросы AJAX в админке и/или интерфейсе; процесс такой же, с некоторыми отличиями в ответах на вышеуказанные вопросы. Давайте погрузимся прямо в!

Основы выполнения запроса AJAX в WordPress

Первое, что вам нужно, это, очевидно, javascript, в который вы хотите отправить запрос AJAX. Он должен быть поставлен в очередь с использованием допустимого метода добавления скриптов в WordPress, будь то внешний или внутренний интерфейс. Скорее всего, у вас уже есть настроенный скрипт, в котором вам просто нужна часть отправки или запроса чего-либо из WordPress.

Публикация AJAX в WordPress требует, чтобы вы передали объектную переменную Javascript в качестве данных для запроса. В объекте вам необходимо предоставить как минимум одно свойство; ‘ action‘. Значением actionсвойства ‘ ‘ является строка, которая может быть (почти) чем угодно. Это действие сообщает WordPress, как направить запрос AJAX. Но он также определяет часть имени хука, к которому вам нужно будет подключиться в PHP для обработки запроса AJAX.

Когда дело доходит до ответа на вопрос 1 выше: на какой URL вы должны отправить запрос AJAX? Это зависит от того, находится ли ваш скрипт в очереди в админке или во внешнем интерфейсе. Поскольку AJAX уже встроен в экраны администрирования WordPress, вы можете просто использовать глобальную переменную ajaxurl. Но для внешних запросов это становится немного сложнее, потому что вам нужно указать URL-адрес AJAX вручную вместе с вашим Javascript. Подробнее об этом ниже.

Для обработки запросов AJAX в PHP вы подключаетесь к действию wp_ajax_<your action name>. Если вы хотите запускать запросы AJAX во внешнем интерфейсе для незарегистрированных пользователей, вы также можете подключиться к файлам wp_ajax_nopriv_<your action name>. Подробнее об этом ниже. Внутри вашей подключенной функции вы можете получить доступ к данным, переданным из Javascript, сославшись на $_POSTмассив. Для вывода чего-то обратно вы просто повторяете что-то. Это краткий ответ на вопрос 2 выше.

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

Выполнение запросов AJAX в админке WordPress

Я предполагаю, что у вас уже есть скрипт, поставленный в очередь, который реагирует на некоторые действия пользователя, собирает данные и готов выполнить запрос AJAX либо для обновления чего-либо, либо для запроса некоторой информации обратно из WordPress. Приведенный ниже код является очень упрощенным примером; код ставит в очередь файл Javascript в теме для администратора, а внутри кода Javascript он устанавливает некоторые случайные переменные, выполняет AJAX при загрузке страницы и выводит ответ в консоль.

add_action('admin_enqueue_scripts', function() {
    wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '/assets/js/awhitepixel-ajax.js', ['jquery'], '', true);
});

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_send_something',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(ajaxurl, data, function(response) {
        console.log(response);
    });
});

Как вы можете видеть в приведенном выше коде Javascript, вы настраиваете объект Javascript (думайте об этом как о массиве) со всеми данными, которые вы хотите передать, включая важное actionсвойство ‘ ‘.

Также, как упоминалось выше, поскольку AJAX уже встроен в экраны администрирования WordPress, вы просто используете глобальную переменную ajaxurlв качестве URL-адреса AJAX.

Теперь мы добавим код для приема этого AJAX-запроса в PHP. Поскольку я указал ‘ awhitepixel_send_something‘ как значение ‘ action‘, мне нужно зацепиться за wp_ajax_awhitepixel_send_something.

add_action('wp_ajax_awhitepixel_send_something', function() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
 
    wp_die();
});

Внутри вашей подключенной функции у вас есть полный доступ к WordPress; вы можете использовать любые функции WordPress, запросы и доступ к глобальным переменным (например, $wpdbдля запросов к базе данных). Все переменные, которые вы передали в Javascript, будут доступны внутри $_POSTмассива с ключами, которые вы указали в объекте Javascript.

Необязательно передавать что-то обратно в Javascript (например, когда вы хотите отправить запрос только на обновление или сохранение чего-либо и не требуете подтверждения). Если вы хотите передать что-то обратно, просто echoваш вывод. Для вывода более сложных переменных, чем просто строка, вы должны вернуть ее в виде массива в кодировке json, чтобы Javascript мог правильно читать и анализировать ее. Что-то вроде этого;

Одно важное замечание в последней строке; wp_die(). Все функции обратного вызова AJAX должны «закрыть поток» или завершиться должным образом, выполнив die()или exit(). В WordPress мы используем wp_die()для правильной интеграции, но результат тот же. Если вы получаете странный «0» в своих ответах AJAX, скорее всего, потому что вы не делал wp_die()или die(), Всегда, всегда удостоверяйтесь, что «вы умираете» в конце всех функций, зацепленных за wp_ajax.

Выполнение запросов AJAX в интерфейсе WordPress

Процесс выполнения AJAX во внешнем интерфейсе такой же, как и в админке, но несколько сложнее при ответе на вопрос 1: на какой URL должен публиковаться AJAX. В приведенном выше примере для выполнения AJAX в админке у нас уже была глобальная переменная Javascript ajaxurl, но эта переменная недоступна для интерфейса. Мы должны обеспечить его сами. Для получения значения URL-адреса AJAX WordPress, который вы используете admin_url('admin-ajax.php')(да, «URL-адрес администратора» для внешнего интерфейса).

При постановке в очередь сценария внешнего интерфейса, который будет выполнять запросы AJAX в вашей теме или плагине, вам необходимо передать URL-адрес AJAX WordPress в качестве переменной для этого Javascript, используя wp_localize_script().

Теперь в вашем Javascript у вас есть доступ к глобальному объекту Javascript Theme_Variables(это имя может быть любым, которое вы хотите), с URL-адресом AJAX WordPress в качестве значения ajax_urlсвойства ‘ ‘. Ваша функция AJAX будет выглядеть примерно так:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

При работе с AJAX во внешнем интерфейсе следует помнить еще об одном хуке, который вы используете для приема запросов AJAX. Вы по-прежнему подключаетесь к wp_ajax_<your action name>, но этот хук будет работать только для посетителей, которые вошли в систему. Если вы хотите выполнять запросы AJAX для посетителей, которые не вошли в систему, вам нужно (также) подключиться к wp_ajax_nopriv_<your action name>. Обычно для внешних AJAX-запросов, необходимых для правильной работы темы, вы подключаетесь к обоим, указывая им на одну и ту же функцию.

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}

Что касается содержимого вашей перехваченной функции AJAX, то это то же самое, что и для запросов администратора. У вас есть полный доступ к WordPress, вы можете получить переданные переменные из $_POST, при желании что-то вернуть, выполнив echo, и вы всегда, всегда должны помнить о «умереть» wp_die()в самом конце.

Защита ваших AJAX-запросов

Поскольку AJAX упрощает передачу данных между сценарием и серверной частью, вам обязательно следует предпринять необходимые шаги, чтобы сделать ваш код безопасным. Это включает в себя очистку любых данных перед их сохранением, а также использование функциональности «nonce» WordPress для проверки того, поступают ли запросы из правильных и принятых мест. Прочтите документацию WordPress по nonce, если вы с ней не знакомы.

Основная предпосылка такова; вы используете метод WordPress, либо создавая значение одноразового номера (wp_create_nonce()), либо создавая скрытое поле ввода с одноразовым номером в качестве значения (wp_nonce_field()). В вашем запросе AJAX вы передаете значение одноразового номера (которое закодировано WordPress) в запросе, а в принимающей части (wp_ajax_хуке) вы сверяете одноразовый номер с тем, что вы установили изначально.

Давайте добавим немного безопасности в пример кода, который мы сделали выше. Сначала мы создадим одноразовый номер и передадим его wp_localize_scriptвместе с URL-адресом AJAX. В качестве параметра wp_create_nonce()мы задаем некую уникальную строку, о которой, так сказать, должны знать только мы. В приведенном ниже примере я использую ‘ awhitepixel-nonce‘.

То, что передается как ‘ nonce‘ в наших переменных Javascript во внешний интерфейс, представляет собой рандомизированное число, сгенерированное WordPress. Никто, кроме нас, авторов этого скрипта, не знает, что допустимым одноразовым номером является ‘ awhitepixel-nonce‘. В нашем Javascript мы берем значение nonce и передаем его обратно в наш запрос AJAX:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14,
        'nonce': Theme_Variables.nonce
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

И, наконец, в нашей wp_ajaxперехваченной функции мы должны начать с проверки того, был ли одноразовый номер действительным с wp_verify_nonce(). Мы предоставляем уникальную строку, которую мы установили выше, и если WordPress не соответствует уникальному закодированному значению, переданному с этой строкой, мы немедленно завершаем работу:

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {
        wp_die(-1);
    }
 
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}