Estoy tratando de manejar una solicitud ajax usando ExpressJS, pero cuando hago clic en cualquier etiqueta de anclaje, la página se vuelve a cargar por completo y no recibe la solicitud manual ajax en el lado del cliente.

Necesito que cuando haga clic en cualquiera de estos enlaces, debería manejarse por parte del cliente usando fetch api.

Esta es la estructura html

 <header id="main-header"> <nav> <ul> <li class="nav-bar"><a data-urlid="" href="/">Home</a></li> <li class="nav-bar"><a data-urlid="about" href="/about">About</a></li> <li class="nav-bar"><a data-urlid="achievements" href="/achievements">Achievements</a></li> <li class="nav-bar"><a data-urlid="gallery" href="/gallery">Gallery</a></li> <li class="nav-bar"><a data-urlid="contact" href="/contact">Contact</a></li> </ul> </nav> </header>

este es el controlador

 const home = (req, res) => { res.json({message:"success"}) };

Este es el enrutador para obtener la página de inicio

 router.get("/", danceController.home);

Tratando de manejar la solicitud de ajax usando vanilla js

 const navBars = document.querySelectorAll(".nav-bar"); async function head(event) { event.preventDefault(); const url = event.target.dataset.urlid; const responseData = await fetch(`/${url}`, { method: "GET", headers: {"Content-Type":"text/html"}}).then((response) => { console.log(response); }); // console.log(responseData); }; for (const navBar of navBars) { navBar.addEventListener("click", head) }