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

Question

Клаус

javascript , wordpress

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

Привет! У меня возникла проблема, связанная с использованием Fetch() для отправки запроса и передачи данных в формате JSON в WordPress. Я пробую два разных способа отправки данных. 

Сначала я использую следующий способ, который работает корректно: 

<pre><code class="javascript">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!')
            }</code></pre> 

При использовании объекта <b>new URLSearchParams(params)</b> все успешно отправляется. Однако, когда я пытаюсь использовать другой способ отправки данных с использованием JSON.stringify(), запрос завершается с ошибкой 400 (Bad Request). Вот код, где я применяю JSON.stringify():

<pre><code class="javascript">const response = await fetch(_fg_object.ajax_url,
                    {
                        method: 'POST',
                        headers: { "Content-Type": "application/json", },
                        body: JSON.stringify({
                            action: "ajax_get_taxonomies",
                            nonce_code : 
</code></pre>

Можете подсказать, в чем может быть проблема при отправке данных в формате JSON?

13 апреля 2025 г. 17:05

Ответы на вопрос 2

Похожие вопросы

Answer 1

Когда вы отправляете данные в формате JSON с помощью функции `fetch()` в WordPress, вам нужно убедиться, что сервер правильно обрабатывает запросы с типом `application/json`. Вот основные шаги, которые стоит проверить:

1. **Правильная обработка JSON на стороне сервера**:
   В WordPress вам необходимо правильно обрабатывать запросы, которые приходят с заголовком `Content-Type: application/json`. Для этого вам нужно использовать функцию `file_get_contents('php://input')` для получения содержимого запроса.

2. **Проверка способа передачи данных**:
   Убедитесь, что ваш обработчик AJAX в WordPress правильно обрабатывает параметры, которые вы отправляете. Вот пример, как это сделать:

```php
add_action('wp_ajax_ajax_get_taxonomies', 'ajax_get_taxonomies');
add_action('wp_ajax_nopriv_ajax_get_taxonomies', 'ajax_get_taxonomies');

function ajax_get_taxonomies() {
    // Проверьте nonce для безопасности
    $nonce = $_POST['nonce_code']; // или используйте file_get_contents('php://input') для получения JSON
    if (!wp_verify_nonce($nonce, 'your_nonce_action')) {
        wp_send_json_error('Invalid nonce');
        wp_die();
    }

    // Если вы используете file_get_contents('php://input'):
    $request_body = file_get_contents('php://input');
    $data = json_decode($request_body, true);

    // Используйте $data для обработки запроса
    $params = $data['params']; // например

    // Ваш код логики здесь

    wp_send_json_success(array('taxonomies' => $taxonomies));
    wp_die();
}
```

3. **Правильное использование fetch**:
   Проверьте, что ваш `fetch` запрос правильно выглядит. Для отправки JSON-данных код может выглядеть так:

```javascript
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,
        params: [1, 2, 3] // передача массива без JSON.stringify, если он уже serialized
    })
});
```

4. **Проблемы с кросс-доменными запросами**:
   Убедитесь, что у вас включены подходящие заголовки для CORS (если нужно), и что ваш AJAX URL правильный.

### Важно:
Проверяйте, что ваш сервер отвечает на запросы правильно. Если после всех изменений возникает ошибка 400, добавьте отладочную информацию (например, `console.log(request_body)` или `error_log($request_body)` на сервере) для анализа содержимого запрашиваемого тела.

Эти шаги должны помочь вам правильно настроить запросы с использованием JSON в WordPress.

Answer 2

Здесь ты отправляешь массив: 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!"
                            }
                        }
]),