Как передать массив из jQuery в PHP с помощью AJAX в WordPress?

Вопрос или проблема

У меня есть HTML-форма с 2 выпадающими списками с множественным выбором. Я получаю выбранные значения при отправке формы с помощью jQuery и сохраняю их в 2 различных массивах:

$('#assign_categories_form').on('submit', function (event) {
    event.preventDefault();

    var documents = [];
    $.each($("#documents_auth_select option:selected"), function(){
        documents.push($(this).val());
    });
    if (documents.length === 0) {
        $('#modal_message_title').html( 'Нет выбранного документа...' );
        $('#modal_message_p').html( 'Необходимо выбрать хотя бы один документ, чтобы присвоить категории!' );
        $('#modal_message_div').modal();
        return false;
    }

    var categories = [];
    $.each($("#dl_categories option:selected"), function(){
        categories.push($(this).val());
    });
    if (categories.length === 0) {
        $('#modal_message_title').html( 'Нет выбранной категории...' );
        $('#modal_message_p').html( 'Необходимо выбрать хотя бы одну категорию перед продолжением!' );
        $('#modal_message_div').modal();
        return false;
    }

    console.log(documents);

    $.ajax({
        type: 'POST',
        url: ajax_db.ajaxurl,
        contentType: 'application/json',
        data: JSON.stringify({
            action: 'assign_categories',
            documents: documents,
            categories: categories
        }),
        success: function (data) {
            alert(data);
        }
    });

});

Мне нужно передать массивы documents и categories в PHP с помощью AJAX, раньше я использовал JSON.stringify, но не понимаю, как сделать это в WordPress…

ИЗМЕНЕНИЕ:

Я попробовал написать:

documents = JSON.stringify(documents);
            console.log(documents);

            $.ajax({
                type: 'POST',
                url: ajax_db.ajaxurl,
                data: {
                    action: 'assign_categories',
                    documents: documents
                },
                success: function (data) {
                    console.log(data);
                }
            });` и в PHP колбэке `public function assign_categories() {

    $documents = json_decode($_POST["documents"]);

    echo $documents;
    wp_die();

}

с PHP колбэком:

public function assign_categories() {

    $documents = json_decode($_POST["documents"]);

    echo $documents;
    wp_die();

}

но колбэк возвращает пустое…

Если assign_categories() находится в классе, вам нужно вызывать действие другим способом.

add_action( 'wp_ajax_assign_categories', 'assign_categories' );

становится

add_action( 'wp_ajax_assign_categories', array( $this, 'assign_categories' ) );

Здесь $this является экземпляром класса.

Ответ или решение

Чтобы передать массивы из jQuery в PHP с помощью AJAX в WordPress, вам нужно следовать нескольким шагам. Я проведу вас через весь процесс, включая и JavaScript, и PHP.

Шаг 1: Подготовка JavaScript с использованием jQuery

Вы уже создали форму и использовали jQuery для получения выбранных значений из двух селектов. Чтобы отладить передачу данных, убедитесь, что вы правильно передаете массив в AJAX-запросе.

Вот ваш обновленный код с корректной передачей массивов:

$('#assign_categories_form').on('submit', function (event) {
    event.preventDefault();

    var documents = [];
    $.each($("#documents_auth_select option:selected"), function(){
        documents.push($(this).val());
    });
    if (documents.length === 0) {
        $('#modal_message_title').html('Ничего не выбрано...');
        $('#modal_message_p').html('Необходимо выбрать хотя бы один документ!');
        $('#modal_message_div').modal();
        return false;
    }

    var categories = [];
    $.each($("#dl_categories option:selected"), function(){
        categories.push($(this).val());
    });
    if (categories.length === 0) {
        $('#modal_message_title').html('Ничего не выбрано...');
        $('#modal_message_p').html('Необходимо выбрать хотя бы одну категорию!');
        $('#modal_message_div').modal();
        return false;
    }

    $.ajax({
        type: 'POST',
        url: ajax_db.ajaxurl, // убедитесь, что ajax_db объявлен и содержит правильный URL
        data: {
            action: 'assign_categories',
            documents: documents,
            categories: categories
        },
        success: function (data) {
            alert(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.error(textStatus, errorThrown);
        }
    });
});

Шаг 2: Обработка данных на стороне PHP

Для обработки AJAX-запроса на стороне PHP вам необходимо создать функцию, которая будет обрабатывать действие assign_categories. Если эта функция находится в классе, вы должны использовать $this для указания на метод класса.

Пример функции PHP:

add_action('wp_ajax_assign_categories', 'assign_categories');

function assign_categories() {
    // Получение данных из AJAX-запроса
    $documents = isset($_POST['documents']) ? $_POST['documents'] : [];
    $categories = isset($_POST['categories']) ? $_POST['categories'] : [];

    // Обработка полученных данных (добавьте свою логику здесь)
    // Например, вы можете вывести их для проверки
    echo 'Документы: ' . implode(', ', $documents) . '<br>';
    echo 'Категории: ' . implode(', ', $categories);

    wp_die(); // завершает выполнение AJAX-запроса
}

Шаг 3: Важно обратить внимание на

  1. Правильное объявление AJAX: По умолчанию Ajax требует, чтобы вы использовали wp_ajax_{action}, он будет работать только для зарегистрированных пользователей. Если вы хотите, чтобы ваш AJAX вызов работал для незарегистрированных пользователей, используйте wp_ajax_nopriv_{action}.

  2. Использование wp_die(): Важно использовать wp_die() в конце вашей функции, чтобы завершить выполнение и обеспечить возврат корректного ответа.

  3. Корректное объявление переменных: Удостоверьтесь, что переменная ajax_db корректно объявлена на стороне JavaScript, как это делается с помощью wp_localize_script() в вашем PHP-коде.

Пример:

function my_enqueue_scripts() {
    wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true);
    wp_localize_script('my-script', 'ajax_db', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Следуя вышеуказанным шагам, вы сможете правильно передать массивы из jQuery в PHP с использованием AJAX в WordPress. Не забудьте добавить обработку ошибок в AJAX для более удобного отладки.

Оцените материал
Добавить комментарий

Капча загружается...