Отправляется запрос, но в ответе ничего не отображается. Постоянная обработка pending

Question

Написал код для отправки POST-запросов при нажатии на кнопку для отправки формы. Проблема заключается в том, что он, вроде как, отправляется, но в ответе ничего не отображается. Ещё есть проблема с постоянной обработкой запроса на Chrome (pending), он постоянно обрабатывается, но никак не может отправиться на сервер и в конце в консоли выдает ошибку "POST https://jsonplaceholder.org/posts net::ERR_CONNECTION_RESET". Попробовал запустить на FireFox, но там тоже долго грузится, но в конце-концов отправляется. Скрины с тем, что у меня нету ответов на запросы буду присылать с FireFox.

Запрос постоянно в обработке "pending" (Chrome):

Отправляю запрос на сервер, но ничего не получаю в ответе (FireFox):

Прошу прощения за такой огромный вопрос, но ответ мне очень сильно нужен!!!

Вот мой код:

const requestURL = "https://jsonplaceholder.org/posts";

let button = document.querySelector("#Buton")
document.querySelector("#Button").addEventListener("click", () => {

    let form = {
        user_name: document.querySelector("#Username").value,
        phone_number: document.querySelector("#PhoneNumber").value,
        email: document.querySelector("#Email").value
    }

    sendRequest('POST', requestURL, form)
        .then(data => console.log(data))
        .catch(err => console.log(err))
})


function sendRequest(method, url, body = null) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()

        xhr.open(method, url)

        xhr.responseType = 'json'
        xhr.setRequestHeader('Content-Type', 'application/json')

        xhr.onload = () => {
            if (xhr.status >= 400) {
                reject(xhr.response)
            } else {
                resolve(xhr.response)
            }
        }

        xhr.onerror = () => {
            reject(xhr.response)
        }

        xhr.send(JSON.stringify(body))
    })
}

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "PT Sans", sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #cdcdcd;
    background: url("../../res/фон.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.form{
    width: 500px;
    background-color: transparent;
    border-radius: 15px;
    color: white;
    padding: 30px 40px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
}

h1{
    text-align: center;
    font-size: 30px;
}

.inputData{
    height: 50px;
    width: 100%;
    margin: 30px 0;
}

.inputData input{
    width: 100%;
    height: 100%;
    border-radius: 40px;
    border: none;
    background-color: transparent;
    outline: none;
    border: 2px solid rgb(255, 255, 255, 0.2);
    font-size: 17px;
    color: white;
    padding: 20px 45px 20px 20px;
}

.inputData input::placeholder{
    color: white;
}

.button{
    width: 100%;
    height: 50px;
    background-color: white;
    outline: none;
    border: none;
    border-radius: 45px;
    box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
    font-weight: bold;
    color: black;
    font-size: 17px;
}

.button:hover{
    background-color: rgb(215, 215, 215);
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; 
}

input[type='number'],
input[type="number"]:hover,
input[type="number"]:focus {
    appearance: none;
    -moz-appearance: textfield;
}

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <link rel="stylesheet" href="css/form/style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> -->
</head>

<body>
    <div class="form">
        <form action="xhr.js" method="POST">
            <h1>Анкета</h1>
            <div class="formInput">
                <div class="inputData">
                    <input type="text" name="Username" placeholder="Имя" required class="Username" id="Username">
                    <box-icon name='user'></box-icon>
                </div>
                <div class="inputData">
                    <input type="number" name="PhoneNumber" placeholder="Телефон" required class="PhoneNumber"
                        id="PhoneNumber">
                    <box-icon name='phone'></box-icon>
                </div>
                <div class="inputData">
                    <input type="email" name="e-mail" placeholder="Электронная почта" required class="email" id="Email">
                    <box-icon name='envelope'></box-icon>

                </div>
            </div>

        </form>
        <button class="button" id="Button">Создать</button>


    </div>
    <script type="text/javascript" src="js/form/xhr.js"></script>



</body>

</html>

Буду благодарен всем людям, которые помогут мне с этим!!!

Answer 1

Проблема может быть в том что:

jsonplaceholder.com не принимает POST запросы
проблема в vpn
в функции sendRequest(), body хардкорно назначен значением null

БЛОГ НА HUSL

Отправляется запрос, но в ответе ничего не отображается. Постоянная обработка pending

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