33-index.html

<!DOCTYPE html>
<html>
<head>
    <title>FastAPI получение данных из объектов.</title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="message"></div>
    <p>
        Введите имя: <br />
        <input name="username" id="username" />
    </p>
    <p>
        Введите возраст: <br />
        <input name="userage" id="userage" type="number" />
    </p>
    <button onclick="send()">Отправить</button>
    <script>
        async function send() {

            // получаем введеные в поля имя и возраст
            const username = document.getElementById("username").value;
            const userage = document.getElementById("userage").value;

            // отправляем запрос
            const response = await fetch("/hello", {
                method: "POST",
                headers: { "Accept": "application/json", "Content-Type": "application/json" },
                body: JSON.stringify({
                    name: username,
                    age: userage
                })
            });
            if (response.ok) {
                const data = await response.json();
                document.getElementById("message").textContent = data.message;
            } else
                console.log(response);
            }
    </script>
</body>
</html>