UPD: Решение нашлось, проблема была с локальным сервером.
Учусь использовать AJAX, задача - написать простой POST запрос, который, по нажатию на button "Submit", берет данные из инпутов формы и отправляет их в файл db.json.
Код написал, данные отправляются и успешно сохраняются в db.json, НО мне нужно, чтобы по нажатию на button "Submit" страница не обновлялась, следовательно нужно отменить её дефолтные действия. Я пытаюсь сделать это через e.preventDefault(), но оно не срабатывает. Объясните в чем причина? Ничего не понимаю.
Код HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form>
<input type="text" name="name">
<input type="text" name="age">
<button>Submit</button>
</form>
<script src="js/script.js"></script>
</body>
</html>
Код JS:
window.addEventListener("DOMContentLoaded", () => {
const form = document.querySelector("form");
function req(e) {
e.preventDefault();
let formData = new FormData(form);
formData.append("id", Math.random());
let obj = {};
formData.forEach((value, key) => {
obj[key] = value;
});
let json = JSON.stringify(obj);
const request = new XMLHttpRequest();
request.open("POST", "http://localhost:3000/people");
request.setRequestHeader("Content-type", "application/json; charset=utf-8");
request.send(json);
}
form.addEventListener("submit", (e) => req(e), {"once": true});
});
Сложный
Простой
