Как отменить перезагрузку страницы после отправления POST запроса с помощью структуры fetch()
В общем, требуется отсылать определенные данные на сервер для последующей передачи этих данных другому пользователю. По заданию требуется использовать только нативный JS. В качестве сервера под json файлы использую расширение json-server под VSC. Обработка данных на сервере не входит в задание, требуется лишь описать методы под чтение и запись данных. В чтении разобрался быстро и без проблем, а вот с записью возникла проблема с тем, что после удачной отправки данных на сервер происходит перезагрузка страницы браузера, а следовательно и всего скрипта, что недопустимо по заданию. Теоретически знаю про технологию AJAX, которая позволяет загружать и выгружать данные с сервера без перезагрузки станицы. Подскажите пожалуйста как выбраться из данной ситуации. Ниже прилагаю код. Вместе с примером db.json
var id = Math.random()
const data = {
"id" : id,
"position_x" : 30,
"position_y" : 50
}
window.onload = ()=>{
const url = 'http://localhost:3000/data'
document.querySelector('button').addEventListener('click',(e)=>request(e))
function request(e){
e.preventDefault()
setResource(url,data)
.then(event.preventDefault())
.catch(err => console.error(err))
}
async function setResource(url,data){
// console.log('Отправка')
const resource = await fetch(url,{
method : 'POST',
headers:{
'Content-type': 'application/json'
},
body: JSON.stringify(data)
})
if(!resource.ok){
throw new Error(`Не могу зафетчить адрес ${url}, статус ${resource.status}`)
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/script.js"></script>
<title>Document</title>
</head>
<body>
<button>Отправить</button>
</body>
</html>//db.json
{
"data": [
{
"id": 0,
"position_x": 10,
"position_y": 50
},
{
"id": 1,
"position_x": 20,
"position_y": 50
}
]
}