Как использовать AJAX в WordPress для отправки формы без перезагрузки страницы

Автор: Ирина Крылова | Опубликовано: 07.01.2026

AJAX — это мощный инструмент для улучшения взаимодействия с пользователем на сайте WordPress, позволяющий отправлять данные на сервер и получать ответ без полной перезагрузки страницы. В этой статье мы подробно разберём, как реализовать AJAX-отправку формы в WordPress, рассмотрим работу с wp_ajax, безопасность и приведём примеры кода.

Что такое AJAX и зачем он нужен в WordPress

AJAX (Asynchronous JavaScript and XML) — это технология, позволяющая обмениваться данными с сервером асинхронно, без перезагрузки страницы. В WordPress AJAX часто используется для динамических функций: загрузки комментариев, фильтрации контента, отправки форм обратной связи и многого другого.

Преимущества AJAX для форм:

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

Но в WordPress есть свои особенности работы с AJAX, связанные с системой безопасности и маршрутизацией запросов, которые мы рассмотрим ниже.

Как устроена AJAX-обработка в WordPress — wp_ajax и wp_ajax_nopriv

WordPress реализует обработку AJAX через специальные хуки wp_ajax_{action} и wp_ajax_nopriv_{action}. Они позволяют выполнять PHP-функции в ответ на AJAX-запросы.

Разница между ними:

wp_ajax_{action} — для авторизованных пользователей
wp_ajax_nopriv_{action} — для неавторизованных (гостей)

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

Пример: создание простой формы с AJAX-отправкой

Создадим форму обратной связи, которая отправляет имя и сообщение без перезагрузки страницы.

1. HTML и JavaScript

Добавим код формы и скрипт для AJAX-запроса в файл темы, например, в footer.php или подключим отдельным скриптом.

<form id="wpabout-ajax-form">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" required/>

  <label for="message">Сообщение:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Отправить</button>
  <div id="wpabout-response" style="margin-top:10px;color:green;"></div>
</form>

<script>
document.getElementById('wpabout-ajax-form').addEventListener('submit', function(e) {
  e.preventDefault();

  var name = document.getElementById('name').value;
  var message = document.getElementById('message').value;
  var responseDiv = document.getElementById('wpabout-response');

  var data = new FormData();
  data.append('action', 'wpabout_send_form');
  data.append('name', name);
  data.append('message', message);

  fetch('" + ajaxurl + "', {
    method: 'POST',
    credentials: 'same-origin',
    body: data
  })
  .then(response => response.json())
  .then(data => {
    if(data.success) {
      responseDiv.style.color = 'green';
      responseDiv.textContent = data.data.message;
      document.getElementById('wpabout-ajax-form').reset();
    } else {
      responseDiv.style.color = 'red';
      responseDiv.textContent = data.data.message;
    }
  })
  .catch(error => {
    responseDiv.style.color = 'red';
    responseDiv.textContent = 'Ошибка отправки: ' + error;
  });
});
</script>

Обратите внимание, что ajaxurl — это глобальная JS-переменная, которую нужно добавить в ваш шаблон или подключить через wp_localize_script в functions.php.

2. PHP: регистрация AJAX-обработчика

Добавьте в functions.php вашей темы или плагина следующий код:

add_action('wp_ajax_wpabout_send_form', 'wpabout_send_form_handler');
add_action('wp_ajax_nopriv_wpabout_send_form', 'wpabout_send_form_handler');

function wpabout_send_form_handler() {
    // Проверяем nonce, если используете

    $name = sanitize_text_field($_POST['name'] ?? '');
    $message = sanitize_textarea_field($_POST['message'] ?? '');

    if(empty($name) || empty($message)) {
        wp_send_json_error(['message' => 'Пожалуйста, заполните все поля.']);
    }

    // Здесь можно сохранить данные, отправить email или выполнить другую логику
    // Для примера просто вернём успех

    wp_send_json_success(['message' => 'Спасибо, ' . esc_html($name) . ', ваше сообщение получено!']);
}

Особенности и советы по безопасности при работе с AJAX в WordPress

При работе с AJAX важно учитывать следующие моменты:

Используйте санитизацию данных. Всегда очищайте входящие данные с помощью функций sanitize_text_field, sanitize_textarea_field или специальных функций для email, URL и т.д.
Проверяйте nonce. Для защиты от CSRF рекомендуется использовать WordPress nonce. Добавьте nonce в форму и проверьте его в обработчике.
Разграничивайте права доступа. Если обработчик должен быть доступен только авторизованным пользователям — используйте только wp_ajax_, если и гостям — добавляйте wp_ajax_nopriv_.
Обрабатывайте ошибки корректно. Отправляйте понятные сообщения об ошибках и обрабатывайте исключения.

Как добавить nonce в AJAX-форму и обработчик

Пример добавления nonce в форму и проверка в обработчике:

1. Создаём nonce в PHP и передаём в JS

function wpabout_enqueue_scripts() {
    wp_enqueue_script('wpabout-ajax-script', get_template_directory_uri() . '/js/wpabout-ajax.js', ['jquery'], null, true);

    wp_localize_script('wpabout-ajax-script', 'wpabout_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpabout_nonce_action'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpabout_enqueue_scripts');

2. Передаём nonce в форму (в HTML или JS)

Добавьте скрытое поле с nonce:

<input type="hidden" name="nonce" value="<?php echo wp_create_nonce('wpabout_nonce_action'); ?>" />

Или используйте в JS:

data.append('nonce', wpabout_ajax_object.nonce);

3. Проверяем nonce в обработчике

function wpabout_send_form_handler() {
    check_ajax_referer('wpabout_nonce_action', 'nonce');

    // Далее обработка данных
}

Пример расширения: отправка данных в плагин WPRemark для создания отзывов

Если у вас установлен плагин WPRemark, можно использовать AJAX для добавления отзывов без перезагрузки. В такой ситуации в обработчике вместо простого ответа вызывайте API плагина для создания отзыва.

Пример использования API WPRemark (упрощённо):

function wpabout_send_form_handler() {
    check_ajax_referer('wpabout_nonce_action', 'nonce');

    $name = sanitize_text_field($_POST['name'] ?? '');
    $message = sanitize_textarea_field($_POST['message'] ?? '');

    if(empty($name) || empty($message)) {
        wp_send_json_error(['message' => 'Пожалуйста, заполните все поля.']);
    }

    // Создаём отзыв через WPRemark API
    $review_id = WPRemark()->reviews->add_review([
        'author' => $name,
        'content' => $message,
        'status' => 'pending' // например, модерация
    ]);

    if($review_id) {
        wp_send_json_success(['message' => 'Спасибо за ваш отзыв! Он появится после модерации.']);
    } else {
        wp_send_json_error(['message' => 'Ошибка при добавлении отзыва.']);
    }
}

Заключение по использованию AJAX для отправки форм в WordPress

Реализация AJAX-отправки форм в WordPress — задача вполне выполнимая даже без глубоких знаний JavaScript и PHP. Главное — понимать архитектуру AJAX в WordPress, особенности безопасности и правильную обработку данных.

Используйте wp_ajax_ хуки, nonce для защиты, и обязательно тестируйте работу форм на различных условиях.

Для улучшения UX и расширения функционала рекомендуем попробовать интеграцию с плагинами вроде WPRemark или другими продуктами из WPShop.