Простой ajax-запрос с использованием Vanilla JS возвращает ошибку 400 Bad Request.

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

<form id="calc-form">  
        <input type="number" id="numa" name="numa" placeholder="Введите число для a" required>  
        <input type="number" id="numb" name="numb" placeholder="Введите число для b" required>  
        <button type="submit">Вычислить</button>  
    </form>  
  
<div id="result"></div>  

document.addEventListener('DOMContentLoaded', function () {  
    // Присоединяем слушатель события отправки к форме  
    document.getElementById('calc-form').addEventListener('submit', function (event) {  
        event.preventDefault(); // Предотвращаем стандартную отправку формы  
  
        // Получаем значения вводимых данных  
        var numa = document.getElementById('numa').value;  
        var numb = document.getElementById('numb').value;  
  
        // Создаем новый AJAX запрос  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', my_ajax_obj.ajax_url, true);  
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
  
        // Определяем, что произойдет при успешной отправке данных  
        xhr.onload = function () {  
            if (xhr.status === 200) {  
                // Отображаем результат в блоке результата  
                document.getElementById('result').innerHTML = xhr.responseText;  
            } else {  
                console.error('Ошибка: ' + xhr.status); // Логирование ошибок  
            }  
        };  
  
        // Обработка ошибок  
        xhr.onerror = function () {  
            console.error('Запрос не удался'); // Логирование сбоя запроса  
        };  
  
        // Отправляем запрос с данными  
        xhr.send('action=calculate_numbers&numa=" + encodeURIComponent(numa) + "&numb=' + encodeURIComponent(numb));  
    });  
});  

function calculate_numbers() {  
    // Проверяем, установлены ли значения и являются ли они корректными  
    if (isset($_GET['numa']) && isset($_GET['numb'])) {  
        $numa = intval($_GET['numa']);  
        $numb = intval($_GET['numb']);  
  
        // Выполняем ваши вычисления (например, сложение)  
        $result = $numa + $numb;  
  
        // Возвращаем результат  
        echo $result;  
    } else {  
        echo 'Неправильный ввод';  
    }  
  
    wp_die(); // Всегда включайте это в конце ваших AJAX функций  
}  
  
add_action('wp_ajax_calculate_numbers', 'calculate_numbers');  
add_action('wp_ajax_nopriv_calculate_numbers', 'calculate_numbers');  

function enqueue_my_scripts() {  
    // Подключаем JavaScript файл  
    wp_enqueue_script('my-ajax-script', get_stylesheet_directory_uri() . '/js/mijntest.js', array(), null, true);  
  
    // Локализуем скрипт, чтобы передать AJAX URL в скрипт  
    wp_localize_script(  
        'my-ajax-script',  
        'my_ajax_obj',   
        array('ajax_url' => admin_url('admin-ajax.php')));  
}  
  
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');  

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

Ваша проблема с получением ошибки 400 Bad Request при выполнении AJAX-запроса в WordPress может быть вызвана несколькими факторами. Давайте разберем код и выделим ключевые моменты, которые могут помочь вам решить данную проблему.

1. Понимание ошибки 400 Bad Request

Ошибка 400 Bad Request обычно указывает на то, что запрос неправильно сформирован или отсутствуют необходимые параметры. В данном случае необходимо убедиться, что данные, отправляемые через AJAX, формируются и передаются корректно.

2. Анализ HTML и JavaScript

Ваш HTML-код для формы и внешний вид выглядят хорошо:

<form id="calc-form">
    <input type="number" id="numa" name="numa" placeholder="Enter number for a" required>
    <input type="number" id="numb" name="numb" placeholder="Enter number for b" required>
    <button type="submit">Calculate</button>
</form>
<div id="result"></div>

В JavaScript-коде вы используете AJAX для обработки формы:

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('calc-form').addEventListener('submit', function (event) {
        event.preventDefault();

        var numa = document.getElementById('numa').value;
        var numb = document.getElementById('numb').value;

        var xhr = new XMLHttpRequest();
        xhr.open('GET', my_ajax_obj.ajax_url, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.onload = function () {
            if (xhr.status === 200) {
                document.getElementById('result').innerHTML = xhr.responseText;
            } else {
                console.error('Error: ' + xhr.status);
            }
        };

        xhr.onerror = function () {
            console.error('Request failed');
        };

        xhr.send('action=calculate_numbers&numa=' + encodeURIComponent(numa) + '&numb=' + encodeURIComponent(numb));
    });
});

3. Проблемы в JavaScript

В вашем JavaScript есть несколько ошибок:

• Неправильное использование HTML тега &: При отправке данных в xhr.send() вы используете &, это экранированный символ для HTML и не должен использоваться в JavaScript. Следует использовать &.

Измените строку отправки:

xhr.send('action=calculate_numbers&numa=' + encodeURIComponent(numa) + '&numb=' + encodeURIComponent(numb));

4. Проверка PHP-кода

Ваш PHP-код для обработки AJAX-запроса выглядит корректным. При этом важно убедиться, что он правильно подключен:

function calculate_numbers() {
    if (isset($_GET['numa']) && isset($_GET['numb'])) {
        $numa = intval($_GET['numa']);
        $numb = intval($_GET['numb']);
        $result = $numa + $numb;

        echo $result;
    } else {
        echo 'Invalid input';
    }

    wp_die();
}

add_action('wp_ajax_calculate_numbers', 'calculate_numbers');
add_action('wp_ajax_nopriv_calculate_numbers', 'calculate_numbers');

5. Проверка functions.php

function enqueue_my_scripts() {
    wp_enqueue_script('my-ajax-script', get_stylesheet_directory_uri() . '/js/mijntest.js', array(), null, true);
    wp_localize_script('my-ajax-script', 'my_ajax_obj', array('ajax_url' => admin_url('admin-ajax.php')));
}

add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

Ваш код в functions.php также выглядит корректным, и функция wp_localize_script должна правильно передать URL для AJAX-запроса.

Заключение

Подводя итог, основная проблема заключается в неправильном формате строки для передачи данных в AJAX-запросе. Убедитесь, что вы используете & вместо & при формировании строки данных. Также проверьте настройку сервера и AJAX endpoint на предмет доступности.

Если ошибки продолжают появляться, рекомендуется:

• Проверить настройки сервера на наличие ограничений.
• Включить журнал ошибок PHP для выявления других возможных проблем.

После внесения изменений и проверок ваш AJAX-запрос должен сработать корректно. Если у вас есть другие вопросы или проблемы, не стесняйтесь обращаться за помощью.