I am creating a simple web application with no front-end framework (other than jQuery) with an Express.js backend. I am trying to redirect the user to a different page once a registration form is submitted, but instead of loading the other page, the page's HTML code is just printed to the console... It would be easier to show you:
Front-end script that handles the form submission
$("#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();
});
My backend index.js
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");
})
So I use res.redirect("/login"); which correctly calls the express route, "/login". But instead of the browser displaying the login page, the page's code is printed to the console by the console.log(data) method call in the success method of the ajax call. Any ideas why this would be happening?
