WordPress: как изменить метод отправки формы AJAX на REST API

В современных проектах на WordPress часто возникает задача оптимизировать форму обратной связи или другие формы, которые по умолчанию используют AJAX через admin-ajax.php. Этот метод работает, но имеет ряд недостатков: нагрузка на сервер, медленная обработка и ограничения по безопасности. В этой статье расскажу, как изменить метод отправки формы с классического AJAX на вызов REST API WordPress, что сделает обработку данных более эффективной и удобной.

Почему стоит использовать REST API вместо admin-ajax.php для форм

REST API в WordPress — современный способ взаимодействия клиентской части с сервером. Он позволяет:

• Быстрее обрабатывать запросы, так как REST API работает на более легковесных endpoint’ах;
• Упрощать разработку, используя стандартные HTTP методы (GET, POST, PUT, DELETE);
• Улучшать масштабируемость и поддержку кода;
• Более гибко управлять доступом и аутентификацией;
• Использовать преимущества кэширования и CDN для API запросов.

В отличие от admin-ajax.php, который загружает весь WordPress для каждого запроса, REST API более оптимизирован.

Как зарегистрировать свой endpoint REST API для обработки формы

Для начала нужно зарегистрировать свой собственный маршрут (endpoint) в REST API, который будет обрабатывать POST-запросы с данными формы. Допустим, у нас есть форма обратной связи с полями имя и email.

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

add_action('rest_api_init', function () {
    register_rest_route('wpsnippets/v1', '/contact-form', array(
        'methods' => 'POST',
        'callback' => 'wpsnippets_handle_contact_form',
        'permission_callback' => '__return_true', // Для публичного доступа, изменить при необходимости
    ));
});

function wpsnippets_handle_contact_form(WP_REST_Request $request) {
    $params = $request->get_json_params();

    $name = sanitize_text_field($params['name'] ?? '');
    $email = sanitize_email($params['email'] ?? '');

    if (empty($name) || empty($email)) {
        return new WP_Error('missing_data', 'Не все обязательные поля заполнены', array('status' => 422));
    }

    if (!is_email($email)) {
        return new WP_Error('invalid_email', 'Некорректный email', array('status' => 422));
    }

    // Здесь можно добавить логику сохранения, отправки письма и т.п.
    // Например, отправим уведомление администратору
    wp_mail(get_option('admin_email'), 'Новая заявка с формы', "Имя: $name\nEmail: $email");

    return array('success' => true, 'message' => 'Спасибо за обращение!');
}

Обратите внимание, что permission_callback установлен в __return_true — это открытый endpoint. В реальных проектах лучше добавить проверку nonce или авторизации.

Пример JavaScript для отправки формы через REST API

Теперь изменим фронтенд, чтобы отправлять данные с помощью fetch к нашему REST API:

document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const data = {
        name: this.name.value.trim(),
        email: this.email.value.trim()
    };

    fetch('/wp-json/wpsnippets/v1/contact-form', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(json => {
        if (json.success) {
            alert(json.message);
            this.reset();
        } else {
            alert('Ошибка: ' + (json.message || 'Неизвестная ошибка'));
        }
    })
    .catch(() => alert('Ошибка сети'));
});

HTML форма может выглядеть так:

<form id="contactForm">
    <label>Имя:</label>
    <input type="text" name="name" required />
    <label>Email:</label>
    <input type="email" name="email" required />
    <button type="submit">Отправить</button>
</form>

Особенности безопасности и валидации при использовании REST API

Обязательно проверяйте и валидируйте все входящие данные. В примере выше использованы функции sanitize_text_field и sanitize_email, а также проверка на корректность email с помощью is_email.

Для защиты от CSRF желательно использовать nonce. Пример с добавлением nonce:

• В PHP зарегистрировать nonce и передать его в скрипт:

wp_localize_script('my-script', 'wpsnippetsData', array(
    'nonce' => wp_create_nonce('wp_rest'),
));

• В JS добавить заголовок:

headers: {
    'Content-Type': 'application/json',
    'X-WP-Nonce': wpsnippetsData.nonce
},

• В PHP в permission_callback проверять nonce:

function wpsnippets_permission_callback() {
    return check_ajax_referer('wp_rest', '_wpnonce', false);
}

// и в регистрации маршрута:
register_rest_route('wpsnippets/v1', '/contact-form', array(
    'methods' => 'POST',
    'callback' => 'wpsnippets_handle_contact_form',
    'permission_callback' => 'wpsnippets_permission_callback',
));

Интеграция с плагинами для расширенной обработки форм

Если вы хотите расширить функционал, можете использовать плагины от WPShop.ru, например, My Popup для вывода форм в модальных окнах или Expert Review для сбора отзывов через REST API.

В этих плагинах уже реализованы удобные REST API endpoints, которые можно подключать аналогичным образом, чтобы не писать код с нуля.

Резюме: преимущества и рекомендации

Перевод форм с классического AJAX на REST API в WordPress — отличное решение для повышения производительности и безопасности сайта. REST API позволяет использовать современные возможности JS, упрощает обработку запросов и масштабирование проекта.

Обязательно уделяйте внимание валидации данных и защите endpoint'ов с помощью nonce или токенов. Используйте готовые решения и плагины, если хотите сэкономить время.

Если вы хотите подробнее изучить REST API WordPress, рекомендую документацию на официальном сайте и эксперименты с собственными endpoint’ами.