Перезагрузка страницы при использовании POST запроса в обработчике события submit при наличии event.preventDefault();
Изучаю json server И POST запросы. Не могу понять, почему у меня происходит перезагрузка страницы. Данные из формы отправляются нормально.
async function postUser(user) {
const response = await fetch("http://localhost:3000/users", {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
body: JSON.stringify(user)
}).then(res => res.json())
.then(data => console.log(data))
}
async function getUsers() {
return await fetch("http://localhost:3000/users")
.then(res => res.json())
.then(data => data)
}
function getUsersForm() {
const form = document.querySelector("form");
const res = form.querySelectorAll(".res");
form.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const userData = {};
formData.forEach((value, key) => {
userData[key] = value;
res.forEach(item => {
item.textContent = "Good"
})
});
postUser(userData);
})
}
getUsersForm()
<div class="container">
<h2>Регистрация пользователя</h2>
<form id="registrationForm">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required>
<div class="res"></div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<div class="res"></div>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<div class="res"></div>
<button type="submit">Зарегистрироваться</button>
</form>
</div>