Estoy tratando de enviar al cliente la siguiente página HTML (create.html) como respuesta a una solicitud GET (activada por un botón) usando fetch. Estoy tratando deliberadamente de evitar el uso de un formulario debido a problemas de formato y posibles problemas de escala en el futuro. El código registra que la solicitud se envía, se recibe y se responde con el archivo, pero simplemente no recarga la página con él. *res.redirect tampoco funciona. He adjuntado mi código a continuación. JavaScript:
app.get('/', function(req, res) { console.log(`[00]: Get request recieved at '/'`); res.sendFile('public/start.html' , { root : __dirname}); }) app.get('/login', function(req, res) { console.log(`[01]: Get request recieved at '/login'`); res.sendFile('public/login.html' , { root : __dirname}); }) app.get('/create', function(req, res) { console.log(`[02]: Get request recieved at '/create'`); res.sendFile('public/create.html' , { root : __dirname}); })HTML:
<html> <head> <meta charset="utf-8"> <title>HOME PAGE</title> </head> <body> <h1 id='title'>Welcome User!</h1> <h2>Select an option bellow!</h2> <button id="btnToLogin">Login</button> <button id="btnToCreate">Create Account</button> <p>-ADMIN PANEL-</p> <button id="btnDisplay">Display Database</button> <button id="btnTruncate">Truncate Database</button> <p id='displayText' >[displayText]: Nothing seems to be here...</p> <script src="start.js"></script> </body> </html>JavaScript HTML:
// Gets elements from start.html var btnToLogin = document.getElementById('btnToLogin'); var btnToCreate = document.getElementById('btnToCreate'); var btnDisplay = document.getElementById('btnDisplay'); var btnTruncate = document.getElementById('btnTruncate'); var displayText = document.getElementById('displayText'); btnToLogin.addEventListener('click', function() { fetch('/login', { method: 'GET' }) }); btnToCreate.addEventListener('click', function() { fetch('/create', { method: 'GET'}) });He recortado la mayor parte de mi código, simplemente innecesario para el problema que creo. Todo se requiere correctamente y el servidor está configurado. Y en caso de que importe, he adjuntado una imagen de la estructura del archivo. Gracias. Estructura de archivos
Fetch realiza y obtiene los datos en segundo plano. res.redirect redirige una solicitud. Y está enviando la solicitud a través de fetch. No barra de direcciones. Para hacer eso, necesita usar location.href en lugar de fetch
btnToLogin.addEventListener('click', function() { location.href = '/login' }); btnToCreate.addEventListener('click', function() { location.href = '/create' });