Как правильно отправка данные с помощью 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

[historydev]

Здесь ты отправляешь массив: JSON.stringify([1,2,3])
А здесь объект: JSON.stringify({action: "ajax_get_taxonomies",

Полагаю должно быть так:

body: JSON.stringify([
                       {
                            action: "ajax_get_taxonomies",
                            nonce_code : _fg_object.getTaxAJAX_nonce,
                            data: {
                                username: "JohnDoe",
                                message: "Hello from fetch!"
                            }
                        }
]),

Comments

[alex0176]

К сожалению не работает.
Вот мой код:

let params = {
                action: 'ajax_get_taxonomies',
                nonce_code : _ymc_fg_object.getTaxAJAX_nonce,
                params: JSON.stringify({ username: "JohnDoe",   message: "Hello" })
            }

            try {
                const response = await fetch(_ymc_fg_object.ajax_url,
                    {
                        method: 'POST',
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        //body: new URLSearchParams(params),
                        body: JSON.stringify(
                            {
                                action: "ajax_get_taxonomies",
                                nonce_code : _ymc_fg_object.getTaxAJAX_nonce,
                                data: {
                                    username: "JohnDoe",
                                    message: "Hello from fetch!"
                                }
                            }
                        )
                    })

Не пойму в чем может быть проблема. При использованию body: new URLSearchParams(params) - все работает, а вот при передаче данных в body: JSON.stringify() - НЕТ

[historydev]

alex0176, Ещё раз. Ты отправляешь объект, отправь массив.

body: JSON.stringify([ // <---- [
                            {
                                action: "ajax_get_taxonomies",
                                nonce_code : _ymc_fg_object.getTaxAJAX_nonce,
                                data: {
                                    username: "JohnDoe",
                                    message: "Hello from fetch!"
                                }
                            }
                        ]) // <----- ]

[alex0176]

historydev,
Обернув в массив и ничего не работает!



Это наверное не правильный синтаксис. Мне нужно просто передать данные в формате JSON и всего лишь...

[historydev]

alex0176,

- headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+ headers: {'Content-Type': 'application/json'},

[alex0176]

historydev,
Не работает! Что то здесь не то. Возможно, нужно учесть что это есть Wordpress и здесь обработка запросов происходит совсем по другому алгоритму. Возможно, с Wordpress работает только - URLSearchParams(params)

const response = await fetch(_ymc_fg_object.ajax_url,
                    {
                        method: 'POST',
                        //headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        headers: {'Content-Type': 'application/json'},
                        //body: new URLSearchParams(params)
                        body: [
                            {
                                action: "ajax_get_taxonomies",
                                nonce_code : _fg_object.getTaxAJAX_nonce,
                                data: {
                                    username: "JohnDoe",
                                    message: "Hello from fetch!"
                                }
                            }
                        ]
                    })

[Михаил Ливач]

historydev, дело не в массиве. В первом случае, где массив - там ещё участвует URLSearchParams , который на вход получает объект.
Так что в контексте формирования тела запроса примеры аналогичны

Answer 2

[WP Panda]

WordPress может не распознать запрос как AJAX, если не указан X-Requested-With

const response = await fetch(_fg_object.ajax_url, {
    method: 'POST',
    headers: { 
        "Content-Type": "application/json",
        "X-Requested-With": "XMLHttpRequest" // Важно для WordPress
    },
    body: JSON.stringify({
        action: "ajax_get_taxonomies", 
        nonce_code: _fg_object.getTaxAJAX_nonce, 
        data: {
            username: "JohnDoe",
            message: "Hello from fetch!"
        }
    }),
});

Comments

[alex0176]

Увы, не работает снова)

const response = await fetch(_ymc_fg_object.ajax_url,
                    {
                        method: 'POST',
                        //headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        //body: new URLSearchParams(params).toString()
                        headers: {
                            "Content-Type": "application/json",
                            "X-Requested-With": "XMLHttpRequest" // Важно для WordPress
                        },
                        body: JSON.stringify({
                            action: "ajax_get_taxonomies",
                            nonce_code: _ymc_fg_object.getTaxAjax_nonce,
                            data: {
                                username: "JohnDoe",
                                message: "Hello from fetch!"
                            }
                        })
                    })

Очень странно...

[WP Panda]

alex0176, кроме этого WP может в этом случае не видеть данные

может понадобиться вручную разбирать php://input в PHP. Лучший вариант для WordPress — использовать URLSearchParams

но если все таки хочется, то как - то так

$json = file_get_contents('php://input');
$data = json_decode($json, true);

if ($data['action'] === 'ajax_get_taxonomies') {
    if (!wp_verify_nonce($data['nonce_code'], 'your_nonce_action')) {
        wp_send_json_error('Invalid nonce');
    }
    
    $username = $data['data']['username'];
    $message = $data['data']['message'];
    
    wp_send_json_success(['result' => 'OK']);
}

[alex0176]

WP Panda,
спасибо, но по ходу использование - URLSearchParams
- это пока что единственный вариант решения задачи

[WP Panda]

alex0176, не обязательно просто он не требует танцев с бубнами

По умолчанию WordPress ожидает данные в $_POST, но при Content-Type: application/json они попадают в сырой ввод (php://input).

В общем код правильный прост WordPress требует дополнительной обработки JSON на стороне PHP.

[yarovikov]

alex0176, не обязательно

const formData = new FormData();
formData.append('action', 'your_ajax_function');
formData.append('post_id', 5353);

const response = await fetch(ajaxUrl, {
  method: 'POST',
  body: formData,
});