Принятие AJAX-запроса с сериализованными данными формы

При работе с AJAX и формами в WordPress мне нравится добавлять ajax-действие прямо в форму, чтобы сериализация работала "из коробки". На самом деле, я писал об этом статью в прошлом году: https://webdevstudios.com/2015/02/12/handling-ajax-in-wordpress/

Но вы здесь за ответами, а не за статьей в блоге, поэтому вот краткая суть. У нас есть три части: первая — это HTML-форма. Вы можете воспользоваться serialize(), поместив действие в скрытое поле формы, вот пример:

<form class="my_form">
    <?php wp_nonce_field( 'my_action_nonce' ); ?>
    <input type="hidden" name="action" value="my_action" />
    <!-- Другие поля здесь... -->
    <input type="submit" name="submit" value="Отправить" class="submit_form_btn" />
</form>

Обратите внимание на скрытое поле формы с именем action. Конечно, я оставил wp_nonce_field(), потому что, ну, вопросы безопасности.

Вторая часть — это сам jQuery. Как уже упоминалось, вам не нужно обращаться к AJAX через оригинальный объект jQuery, так как он уже передан как $, но в целом это не навредит, просто не лучшая практика.

jQuery( document ).ready( function( $ ) {
    $( '.submit_form_btn' ).on( 'click', function( evt ) {
        // Останавливаем стандартную отправку формы
        evt.preventDefault();
        // Сериализуем всю форму, включая действие
        var serialized = $( '.my_form' ).serialize();
        $.ajax( {
            url: ajaxurl, // Эта переменная где-то определена
            method: 'POST',
            data: serialized, // Здесь наши сериализованные данные
        } ).done( function( result ) {
            // Обрабатываем результат здесь...
        } );
    } );
} );

Я постарался максимально прокомментировать код, он должен быть понятным, но давайте разберем. Сначала мы останавливаем отправку формы методом preventDefault() объекта evt (сокращение от event).

Затем сериализуем данные формы и сохраняем их в переменную. Думаю, можно было бы сократить и сразу передать их в объект данных, но это уже на ваше усмотрение.

И последняя часть — вам же нужно видеть, что вы отправляете, верно? Здесь пригодятся error_log и print_r, вот как это сделать:

<?php

function handle_ajax() {
    // Проверяем nonce
    if ( ! wp_verify_nonce( $_POST['_wpnonce'], 'my_action_nonce' ) ) {
        // Можно либо просто завершить, либо использовать JSON
        wp_send_json_error();
    }
    // Здесь вы получите все данные в переменной $_POST
    // Или можно сделать так и проверить лог ошибок
    
    error_log( print_r( $_POST, 1 ) );

    // Это выведет ВСЮ переменную $_POST в debug.log, если он включен,
    // иначе — в лог ошибок PHP

}
add_action( 'wp_ajax_my_action', 'handle_ajax' );

Теперь это ДОЛЖНО обработать ваш AJAX-запрос. Что делать с данными — решать вам.

Почему вы используете jQuery.ajax?

Когда вы определяете jQuery(document).ready(function($) {... $ становится вашей глобальной переменной jQuery. Обёртка noConflict для jQuery в WordPress

Ваш ajax-запрос должен выглядеть примерно так:

$.ajax({
type : 'post',
url : ajaxurl,
etc : ....

Далее, вы не можете просто передать строку переменных. Сначала вам нужно определить их в объект и передать его.

Попробуйте так:

get_data = $('#my-form').serialize();
var data = {action: 'process_request', add_my_data: get_data, my_nonce: nonce};

Не уверен насчёт сериализации... Кажется, WordPress уже делает это во время ajax-запроса. Возможно, вам нужно изучить этот вопрос подробнее.