Посібник: як правильно використовувати AJAX у WordPress

Останнє оновлення Лис 11, 2022

Зміст

Основи виконання запитів AJAX у WordPress

Виконання запитів AJAX в адмінці WordPress

Виконання запитів AJAX у інтерфейсі WordPress

AJAX — це техніка, яку можна використовувати в Javascript для отримання даних із сервера та оновлення вмісту вашої сторінки, не перезавантажуючи її у вашому браузері. У цій публікації ми розповімо, як правильно використовувати AJAX у WordPress.

Більшість із вас, напевно, знайомі з виконанням запитів AJAX за межами WordPress і хочуть дізнатися, як це зробити в WordPress. Можливо, вас цікавлять такі питання:

На яку URL-адресу слід надсилати запити AJAX у своєму Javascript.
Як насправді перехопити запит AJAX у PHP, отримати його дані та надіслати щось назад.
Переконайтеся, що ваші запити AJAX безпечні.

У WordPress ви можете виконувати запити AJAX в адмінці та/або інтерфейсі; процес такий самий з деякими відмінностями у відповідях на запитання вище. Давайте відразу зануримося!

Основи виконання запитів AJAX у WordPress

Перше, що вам потрібно, це, очевидно, javascript, куди ви хочете надіслати запит AJAX. Його слід поставити в чергу, використовуючи дійсний метод додавання сценаріїв до WordPress, будь то інтерфейс або сервер. Швидше за все, у вас уже є налаштований сценарій, де вам потрібна лише частина надсилання або запиту чогось із WordPress.

Публікація AJAX у WordPress вимагає від вас передати змінну об’єкта Javascript як дані до запиту. В об’єкті необхідно надати як мінімум одну властивість; ‘ action‘. Значення властивості ‘ action‘ — це рядок, який може бути (майже) будь-яким. Ця дія вказує WordPress, як маршрутизувати запит AJAX. Але він також визначає частину назви підключення, яке потрібно підключити в PHP для обробки запиту AJAX.

Що стосується відповіді на запитання 1 вище: за якою URL-адресою потрібно надіслати запит AJAX? Це різниться залежно від того, чи ваш сценарій поставлено в чергу в admin чи frontend. Оскільки 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()для належної інтеграції, але результат той самий. Якщо у відповідях AJAX ви отримуєте дивний «0», це, швидше за все, тому, що ви не робив 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 без жодного разу, якщо ви з нею не знайомі.

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

Давайте додамо трохи безпеки до прикладу коду, який ми зробили вище. Спочатку ми згенеруємо nonce і передамо його wp_localize_scriptразом із URL-адресою AJAX. Як параметр wp_create_nonce()ми встановлюємо якийсь унікальний рядок, про який повинні знати, так би мовити, тільки ми. У наведеному нижче прикладі я вибираю " awhitepixel-nonce".

Те, що передається як «nonce» у наших змінних Javascript у інтерфейс, — це випадкове число, згенероване WordPress. Ніхто, крім нас, авторів цього сценарію, не знає, що дійсним nonce є ‘ 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підключеній функції ми повинні почати з перевірки, чи був nonce дійсним з 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();
}

Джерело запису: awhitepixel.com