Використання REST API WordPress з AJAX для користувацьких запитів
Вступ
Отже, ви хочете зануритися в привабливий світ веб-розробки, але вас трохи лякають усі ці незвичні фрази — AJAX, REST API і WordPress. Не бійтеся, дорогий читачу! Ви на порозі захоплюючої подорожі від нуля до задоволення від виконання власних AJAX-запитів за допомогою WordPress REST API. Зручніше влаштуйтеся, візьміть гарячий напій, і давайте почнемо!
Зверніть увагу: Відстаньте, любителі Ctrl+C, Ctrl+V! Ви не можете просто копіювати й вставляти код і сподіватися, що він працюватиме. Я за вами спостерігаю!
Обробка трьох Халків: AJAX, REST API і WordPress
Розуміння AJAXAJAX (Асинхронний Javascript і XML) схожий на вашого поштаря. Він метається туди-сюди, доставляючи та збираючи дані між клієнтом (веб-браузером) і сервером. Найкрутіша частина AJAX? Він робить усе це, не потребуючи перезавантаження веб-сторінки. Тож наступного разу, коли ви будете скиглити з приводу затримки перезавантаження сторінки, пам’ятайте про AJAX, вашого невизнаного героя!
Розгадування REST APIREST API? Звучить по-геекськи, і так воно є. Але давайте спростимо. Уявіть це як офіціанта. Ви (клієнт) робите замовлення (запит), кухня (сервер) готує вашу страву (дані), а офіціант (REST API) подає її вам. Легко, так?! REST (Представницький Перехід Стану) API (Інтерфейс Програмування Додатків) — це метод, який допомагає клієнтам спілкуватися з серверами. Дякуємо, REST API, що ти є непроханим мостом!
Прийняття WordPressНі, це вже не просто платформа для ведення блогів. WordPress показує, на що здатен, ставши комплексною системою управління контентом. Чудова річ у WordPress? Його REST API! Він надає доступ до даних вашого сайту у простому форматі JavaScript Object Notation (JSON). Справжня крутість, чи не так?
Зв’язування всіх елементів: AJAX+REST API+WordPressЯкщо AJAX ваш поштар, REST API офіціант, а WordPress — ваша комунікаційна платформа, давайте об’єднаємо їх суперсили. AJAX, принеси мені дані! REST API, допоможи AJAX з даними. WordPress, надай простір для цього фантастичного дуету.
Отримання даних за допомогою AJAX у WordPressДобре. Час кодувати. Не панікуйте. Прийміть код. Полюбіть код. Будьте кодом.
Спочатку давайте підключимо AJAX-скрипти в WordPress. Напишіть це у файлі functions.php у вашій темі.
function ajax_scripts() {
wp_enqueue_script( 'our-ajax-request', get_template_directory_uri() . '/js/ajax.js', array( 'jquery' ) );
wp_localize_script( 'our-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'ajax_scripts' );
Це як навчити AJAX, як знайти адресу нашого сервера!
Відправка AJAX-запиту до REST APIДалі давайте зробимо власний AJAX-запит. Пам’ятайте, AJAX любить дані. Він залежний від даних, одержимий даними. Тож давайте взаємодіяти з WordPress REST API, щоб надіслати трохи смачних даних.
Створіть кнопку, яка викликатиме наш AJAX-запит при натисканні.
<button id="get-data">Отримати дані</button>
<div id="display-data"></div>
Тепер перейдіть до ‘ajax.js’ і напишіть наступний код, щоб надіслати AJAX-запит при натисканні кнопки.
var getDataBtn = document.getElementById('get-data');
getDataBtn.addEventListener('click', function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'http://yourwebsite.com/wp-json/wp/v2/posts');
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var data = JSON.parse(ourRequest.responseText);
console.log(data);
} else {
console.error('Сервер повернув помилку');
}
};
ourRequest.onerror = function() {
console.error('Помилка з'єднання');
};
ourRequest.send();
});
Ура! Ви щойно надіслали свій перший AJAX-запит до WordPress REST API. Чи чуєте ви відлуння у консолі вашого браузера?
Підсумок
Вітаємо, дорогий воїне коду! Ви щойно розблокували потужну комбінацію AJAX, WordPress REST API і впоралися з деяким кодом (і вижили!). Продовжуйте практикувати, продовжуйте вчитися. І пам’ятайте, подорожі в світі коду часто заплутані, криві та сповнені багів, але вони неймовірно винагороджують!
Тепер ідіть і робіть так, щоб ваші веб-сторінки виконували більше класних і динамічних речей. Також не забудьте подякувати AJAX, REST API і WordPress. Вони тепер ваші нові найкращі друзі!
