Урок 4. Робота з Ajax у плагіні автокомпліту постів

Продовжуємо розробку нашого плагіна автозаповнення постів. Сьогодні розберемо функціонал Ajax у WordPress: що, де і як підключати, як протестувати роботу без реалізованого фронтенду, та які саме запити надсилати на сервер.

Перейдемо до коду. Відкриваємо наш наразі єдиний файл — «/wp-content/plugins/wp-post-autocomplete/wp-post-autocomplete.php». В конструкторі класу «WpPostAutocomplete» додаємо:

add_action('wp_ajax_autocomplete', array($this, 'ajax_autocomplete'));
add_action('wp_ajax_nopriv_autocomplete', array($this, 'ajax_autocomplete'));

За допомогою функції WP `add_action` реєструємо власний хук для обробки AJAX-запитів:
- `wp_ajax_…` — для авторизованих користувачів,
- `wp_ajax_nopriv_…` — для неавторизованих.

Далі має бути метод обробки такого запиту — ось так:

add_action('wp_ajax_{autocomplete}');
add_action('wp_ajax_nopriv_{autocomplete}');

Розбори коду:
- Отримуємо текст із запиту:

public function ajax_autocomplete()
{
	try
	{
		$Posts = get_posts([
			'posts_per_page' => 10,
			's' => esc_sql(filter_input(INPUT_POST, 'text', FILTER_SANITIZE_STRING)),
		]);

		$array = [];
		foreach($Posts as $Post)
		{
			$array[] = [
				'title' => $Post -> post_title,
				'link' => get_permalink($Post -> ID),
			];
		}

		wp_send_json_success($array);			
	}
	catch (Exception $ex)
	{
		wp_send_json_error(array(
			'message' => 'Неможливо обробити запит',
		));
	}
}

- Виконуємо пошук через функцію `get_posts`, обмежуючи 10 записами:

filter_input(INPUT_POST, 'text', FILTER_SANITIZE_STRING)

- Формуємо масив результатів (з заголовком і посиланням):

$array = [];
foreach($Posts as $Post)
{
	$array[] = [
		'title' => $Post -> post_title,
		'link' => get_permalink($Post -> ID),
	];
}

- Відправляємо результат у форматі JSON:

wp_send_json_success($array);

- А у випадку помилки — повертаємо JSON з повідомленням:

wp_send_json_error(array(
	'message' => 'Неможливо обробити запит',
));

Зверніть увагу — можна покращити код, додавши повідомлення, якщо жодного запису не знайдено. Але наш плагін поки що простий, тож це залишаємо на майбутнє.

Тестування

Якби фронтенд був вже реалізований, включно з формою пошуку, ми б тестували через браузерні консольні інструменти. Але оскільки це поки попередній етап, використовуємо консоль і утиліту `curl`.
Якщо її немає — встановіть.

Команди для тестування:

curl -d "action=autocomplete&text=це" -X POST http://wordpress.l/wp-admin/admin-ajax.php

або красиво відформатований вихід за допомогою:

curl -d "action=autocomplete&text=это" -X POST http://wordpress.l/wp-admin/admin-ajax.php | json_pp

Зверніть увагу, URL `/wp-admin/admin-ajax.php` повинен бути під заміненою доменною адресою вашого сайту.

На цьому все. Код уроку доступний у нашому репозиторії GitHub за цього посилання. До зустрічі!

Список усіх уроків теми

• Урок 1. Як самостійно написати плагін для WordPress
• Урок 2. Розробка шорткоду для плагіна WP Post Autocomplete
• Урок 3. Підключення стилів і JS скриптів до плагіна автокомпліта постів
• Урок 4. Робота з Ajax у плагіні автокомпліта постів
• Урок 5. Підключення jQuery Autocomplete до плагіна автокомпліта постів
• Урок 6. Вивід списку постів на сторінку та пагінація