Estoy creando una aplicación web simple sin marco frontal (aparte de jQuery) con un backend Express.js. Estoy tratando de redirigir al usuario a una página diferente una vez que se envía un formulario de registro, pero en lugar de cargar la otra página, el código HTML de la página simplemente se imprime en la consola... Sería más fácil mostrártelo:
$("#registration-form").on("submit", event => { const formData = convertFormToJson($("#registration-form")); $.ajax({ type: "POST", url: "api/auth/registration", data: JSON.stringify(formData), contentType: "application/json;charset=UTF-8", success: function(data) { console.log(data); // This is where the HTML code is being printed }, error: function(request, status, error) { console.log(error); } }); event.preventDefault(); }); app.post("/api/auth/registration", (req, res) => { const { email, password, confirmPassword } = req.body; // Authenticate credentials... res.redirect("/login"); }); app.get("/registration", (req, res) => { console.log('registration'); res.sendFile(__dirname + "/registration.html"); }); app.get("/login", (req, res) => { console.log("login"); res.sendFile(__dirname + "/login.html"); }) Así que uso res.redirect("/login"); que llama correctamente a la ruta expresa, "/login". Pero en lugar de que el navegador muestre la página de inicio de sesión, el código de la página se imprime en la consola mediante la llamada al método console.log(data) en el método de éxito de la llamada ajax. ¿Alguna idea de por qué sucedería esto?
Gracias a @Phil, encontré una respuesta a una pregunta relacionada que explicaba por qué tenía este problema. Esta es una cita de la respuesta a la que se hace referencia: hay varias formas de enviar un formulario desde el navegador:
- Formulario HTML, botón de envío, el usuario presiona el botón de envío, sin Javascript involucrado.
- Formulario HTML en la página, Javascript obtiene el elemento DOM para el formulario y llama al método .submit() en el objeto del formulario.
- Llamada Ajax usando la interfaz XMLHttpRequest con el método POST y enviando manualmente los datos de formulario apropiados.
- Ajax Fetch llame con el método POST y envíe manualmente los datos del formulario apropiado. Con #1 o #2, el navegador envía el formulario y el navegador prestará atención a los redireccionamientos y mostrará la respuesta del formulario (ya sea redirigido o no) en el navegador.
Con #3 y #4, el formulario se envía a través de Javascript y la respuesta regresa a su Javascript. #3 no procesa redireccionamientos. #4 tiene una opción para procesar redireccionamientos. Aquí hay más información sobre cada una de las opciones anteriores. # 3 y # 4 no afectan la visualización del navegador no se ve afectada en absoluto a menos que programe su propio Javascript para procesar la solicitud y afectar la visualización del navegador (ya sea insertando contenido o configurando window.location a una nueva URL).
Debido a que estaba haciendo una llamada de búsqueda ajax en lugar de dejar que el formulario HTML manejara su propio envío, el navegador no respondía a la redirección.
La solución: simplemente saqué el método jQuery ajax e incluí el method y las etiquetas de action en el formulario, lo que resultó en el envío directo del formulario al servidor.