Как правильно отправить данные с помощью Fetch() в Wordpress?

Question

[alex0176]

Пытаюсь сделать запрос с помощью Fetch() для отправки запроса и передачи данных в формате JSON в Wordpress
Использую первый способ отправки:

let params = {
                action: 'ajax_get_taxonomies',
                nonce_code : _fg_object.getTaxAJAX_nonce,
                params: JSON.stringify([1,2,3])
            }
            try {
                const response = await fetch(_fg_object.ajax_url,
                    {
                        method: 'POST',
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        body: new URLSearchParams(params)
                    })

                if (response.ok) {
                    const data = await response.json();
                    console.log(data.taxonomies);
                } else {
                    console.error("Error HTTP: " + response.status);
                }
            }
            catch(e) {
                console.error('Error occurred!')
            }

При использовании объекта new URLSearchParams(params) все успешно отправляется
Но когда использую другой способ отправки с использованием JSON.stringify() данные не отправляться и получаем ошибку 400 (Bad Request)

const response = await fetch(_fg_object.ajax_url,
                    {
                        method: 'POST',
                        headers: { "Content-Type": "application/json", },
                        body: JSON.stringify({
                            action: "ajax_get_taxonomies",
                            nonce_code : _fg_object.getTaxAJAX_nonce,
                            data: {
                                username: "JohnDoe",
                                message: "Hello from fetch!"
                            }
                        }),
                    })

В чем может быть проблема? С использованием body: new URLSearchParams(params) все работает, а когда отправляем через тело запроса body: JSON.stringify({}) - нет.

Comments

[Refguser]

Спасибо за любой совет.

Пожалуйста

[historydev]

alex0176 тогда в документацию по ссылке Refguser

Answer 1

[Николай Дубков]

Добрый день, alex076!

Во втором фрагменте кода, вы преобразовали 'action', 'none', 'data' в JSON, что неверно.

1. Хук (он же action/крючок) и nonce-выражение должны передаваться, как есть, они не имеют отношения к данным, которые вы пытаетесь отправить на сервер. Из-за этого возникает ошибка "Bad Request". Так как ваш action вызова AJAX события в WordPress ожидает "параметр URL", а не строку.

2. В первом примере, код срабатывает, так как в строку преобразуется только значение свойства params, а свойства action и nonce_code остаются параметрами, что верно:

action: 'ajax_get_taxonomies',
nonce_code : _fg_object.getTaxAJAX_nonce,
params: JSON.stringify([1,2,3])

3. Наиболее верным подходом, по моему мнению, является использование FormData():

let params = {
    username: "JohnDoe",
    message: "Hello from fetch!",
    items: [1, 2, 3]
};

const jsonString = JSON.stringify(params);

let formData = new FormData();
    formData.append('nonce',  '_fg_object.getTaxAJAX_nonce');
    formData.append('action', 'ajax_get_taxonomies');
    formData.append('foo', 'bar'); # Передача любой строки
    formData.append('json', jsonString) # Передача JSON

const response = await fetch(_fg_object.ajax_url, {
    method: 'POST',
    body: formData
})

5. FormData позволяет обработать параметры через $_POST:

public function wpAjaxHandler()
{
    # Простая строка
    if ($_POST['foo']) {
        $bar = $_POST['foo'];
    }
    # JSON
    if ($_POST['json']) {
        $decodedJson = json_decode($_POST['json'], true, 512);
    }
}

Успехов!