Проблема с AJAX в Wordpress с передачей action

У меня проблема с передачей action при AJAX-запросе в Wordpress. Стоит задача - сделать калькулятор для расчёта калорий и индекса массы тела. Решил сделать расчёты на стороне сервера, потому что не очень разбираюсь в этой теме, хочу по шагам понять взаимодействие и получить опыт. Вот HTML:

<form action="???" class="calculator__form" id="calcForm" method="POST">
    <input type="text" name="height" class="calculator__input input__height" placeholder="Введите ваш рост (см)">
    <input type="text" name="weight" class="calculator__input input__weight" placeholder="Введите ваш вес (кг)">
    <input type="text" name="age" class="calculator__input input__age" placeholder="Введите ваш возраст">
    <select name="gender" id="" class="calculator__input input__gender">
        <option value="choose">Выберите ваш пол</option>
        <option value="male">Мужчина</option>
        <option value="female">Женщина</option>
    </select>
    <select name="activity" id="" class="calculator__input input__activity">
         <option value="choose">Выберите ваш уровень активности</option>
         <option value="desk">Сидячий образ жизни без нагрузок</option>
         <option value="1-to-3">Тренировки 1-3 раза в неделю</option>
         <option value="3-to-5">Тренировки 3-5 дней в неделю</option>
         <option value="6-to-7">Интенсивные тренировки 6-7 раз в неделю</option>
         <option value="sportsman">Спортсмены, тренировки чаще 1 раза в день</option>
     </select>
     <input type="submit">
</form>

Вот js:

'use strict';
let calcForm = document.querySelector('#calcForm');
calcForm.addEventListener('submit', function (e) {
    e.preventDefault();
 
    let data = {
        action: 'bmi',
        height: +document.querySelector('input[name="height"]').value,
        weight: +document.querySelector('input[name="weight"]').value,
        age: +document.querySelector('input[name="age"]').value,
        gender: document.querySelector('select[name="gender"]').value,
        activity: document.querySelector('select[name="activity"]').value
    }
 
    let xhr  = new XMLHttpRequest();
    xhr.open('POST', myAjax.ajaxurl, true);
    xhr.responseType = 'json';
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    xhr.send(JSON.stringify(data));
    xhr.addEventListener('load', () => {
        console.log(xhr.response);
    });
});

Вот php в файле functions.php:

add_action('wp_ajax_bmi', 'count_bmi');
add_action('wp_ajax_nopriv_bmi', 'count_bmi');
 
function count_bmi() {
    $height = $_POST['height'];
    $weight = $_POST['weight'];
    $age = $_POST['age'];
    $gender = $_POST['gender'];
    $activity = $_POST['activity'];
    $bmi = 0;
    $bmr = 0;
    $bmra = 0;
    $message = "";
    $image = "";
 
    $bmi = $weight / (($height / 100) * ($height / 100));
    if ($gender == 'male') {
        $bmr = 88.36 + (13.4 * $weight) + (4.8 * $height) - (5.7 * $age);
    } else {
        $bmr = 447.6 + (9.2 * $weight) + (3.1 * $height) - (4.3 * $age);
    }
 
    if ($activity == 'desk') {
        $bmra = $bmr * 1.2;
    } else if ($activity == '1-to-3') {
        $bmra = $bmr * 1.375;
    } else if ($activity == '3-to-5') {
        $bmra = $bmr * 1.55;
    } else if ($activity == '6-to-7') {
        $bmra = $bmr * 1.725;
    } else if ($activity == 'sprotsman') {
        $bmra = $bmr * 1.9;
    } else {
        $bmra = 0;
    }
 
 
 
    $out = array (
        'message' => $message,
        'bmi' => $bmi,
        'bmr' => $bmr,
        'bmra' => $bmra
    );
 
    header('Content Type: text/json; charset=utf-8');
    return json_encode($out);
}

Скрипт подключён правильно, видит переменную ajaxurl. В вордпрессе все ajax-запросы должны проходить через admin-ajax.php. Если я в js меняю при запросе урл на, какой-нибудь фейковый апи, типа https://jsonplaceholder.typicode.com/posts, то всё корректно отрабатывает, приходит ответ от сервера. Но если я посылаю запрос на admin-ajax.php, то вылазит 400 ошибка и сервер возвращает 0. Я залез в admin-ajax.php, посмотрел, что 0 возвращается, если не передан action или передан некорректно.

Вопрос: как мне правильно передать экшн на чистом js, чтобы всё заработало? Именно на чистом, потому что хочу разобраться по шагам, как всё работает и не хочу зависеть от библиотек, хочу понять и научиться. Пожалуйста, пишите только по делу, а то на форуме одном мне посоветовали уже сперва скрипт реализовать, а потом плагин писать. Толку его писать, если скрипт с другими апишками отрабатывает, а с вордпрессом - нет?

И ещё один вопрос: какой экшн в этом случае должен стоять в форме? Пробовал разные варианты, ничего не помогает. Всё так же bad request.


Ответы (0 шт):