trouble with POST method to send json data to backend-CodePudding

i'm writing frontend for some form and im tring to send json data to backend, but here is some trouble

also we have backend on java and there is no allusion that we a getting something

script.js
const signUpBtnForm = document.querySelector('.form__btn_signup')
signUpBtnForm.addEventListener('click', function () {
    let xhr = new XMLHttpRequest();

    let json = JSON.stringify({
        name: document.reg.name,
        phone: document.reg.phone,
        password: document.reg.password
    });

    xhr.open("POST", "http://localhost:8080/users");
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.send(json);

    xhr.onload = () => alert(xhr.response);
})

index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Форма авторизации</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <article >
            <form action="#" name="reg"  method="post">
                <h3 > Регистрация </h3>
                <p>
                    <input type="text" name="name"  placeholder="ФИО">
                </p>
                <p>
                    <input type="text" name="phone"  placeholder="Телефон">
                </p>
                <p>
                    <input type="password" name="password"  id="password_registration" placeholder="Пароль">
                </p>
                <p >Пароль слишком короткий</p>
                <p >В пароли есть недопустимые символы: .@$!%*#?&><)(^-_< /p>
                <p>
                    <input type="password"  id="second_password_registration"
                                placeholder="Подтвердите пороль">
                </p>
                <p >Пароли не совпадают</p>
                <p>
                    <button >Зарегистрироваться</button>
                </p>
            </form>
    </article>
    
</body>

</html>

i think that the trouble is in script, not in connections

may be you have some ideas about that?

CodePudding user response：

.addEventListener() is causing undefined error, moving the conde inside condition removes the error for me,

const signUpBtnForm = document.querySelector('.form__btn_signup')
if(signUpBtnForm){
    signUpBtnForm.addEventListener('click', function () {
    event.preventDefault();
    let xhr = new XMLHttpRequest();

    let json = JSON.stringify({
        name: document.reg.name,
        phone: document.reg.phone,
        password: document.reg.password
    });

    xhr.open("POST", "http://localhost:8080/users");
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.send(json);

    xhr.onload = () => alert(xhr.response);
    return false;
})
}

Also, your page is navigating upon clicking the submit button, you need to use

event.preventDefault()

as well. And move your script.js to the bottom just above closing /html tag. Form submission works for me.