基于Express.js的AJAX用户认证与页面跳转问题咨询

你的核心问题是：用AJAX发送登录请求后，服务端直接res.render('foods.ejs')返回HTML，但前端AJAX拿到HTML字符串后不知道怎么让浏览器展示这个页面——因为AJAX是异步请求，默认不会触发浏览器的页面跳转或替换，只会把响应内容传给回调函数。

下面给你三种实用的解决方案，按推荐程度排序：

方案1：服务端返回跳转指令，前端执行页面跳转（最推荐） #

这种方式既保留了AJAX无刷新显示错误的优势，又能让浏览器正常加载目标页面，URL也会更新，用户体验最佳。

服务端代码修改 #

先给/foods加一个独立的GET路由（用来正常渲染页面），然后在登录接口返回跳转信息：

// 首页路由
app.get("/", (req, res) => { 
  res.render("index"); 
}); 

// 登录验证接口
app.post("/auth", (req, res) => { 
  const userEmail = req.body.email; 
  const password = req.body.password; 
  usersInstance.checkUser(userEmail, password, (err, userExists) => { 
    if (userExists) {
      // 返回JSON格式的成功信息，包含跳转URL
      res.json({ success: true, redirectUrl: '/foods' }); 
    } else {
      // 返回错误信息，方便前端显示
      res.json({ success: false, message: "用户不存在或密码错误" }); 
    }
  }); 
});

// 单独的foods页面路由（可以在这里加登录校验，防止未登录直接访问）
app.get("/foods", (req, res) => {
  res.render('foods.ejs');
});

客户端AJAX修改 #

在success回调里判断返回的信息，如果成功就执行页面跳转：

$("form").submit((e) => { 
  e.preventDefault(); 
  const emailId = document.querySelector("#email").value; 
  const password = document.querySelector("#password").value; 
  
  // 先清除之前的错误提示（可选）
  document.querySelector(".error")?.remove();

  $.ajax({ 
    url: "/auth", 
    method: "POST", 
    data: { email: emailId, password: password }, 
    success: (res) => { 
      if (res.success) {
        // 让浏览器跳转到foods页面，服务端会正常渲染这个页面
        window.location.href = res.redirectUrl;
      } else {
        // 在密码输入框下方显示错误提示
        document.querySelector("#password").insertAdjacentHTML('afterend', `<p class="error">${res.message}</p>`);
      }
    }, 
    error: (err) => { 
      alert("请求失败，请稍后重试"); 
    }, 
  }); 
});

方案2：直接用AJAX返回的HTML替换当前页面内容（适合单页场景） #

如果不需要改变URL，想在当前页面直接替换成foods的内容，可以这样做：

服务端代码保持不变 #

继续用res.render('foods.ejs')返回渲染后的HTML：

app.post("/auth", (req, res) => { 
  const userEmail = req.body.email; 
  const password = req.body.password; 
  usersInstance.checkUser(userEmail, password, (err, userExists) => { 
    if (userExists) res.render('foods.ejs'); 
    else res.send("user does not exist"); 
  }); 
});

客户端AJAX修改 #

在success回调里把返回的HTML替换当前页面的内容：

$("form").submit((e) => { 
  e.preventDefault(); 
  const emailId = document.querySelector("#email").value; 
  const password = document.querySelector("#password").value; 
  
  $.ajax({ 
    url: "/auth", 
    method: "POST", 
    data: { email: emailId, password: password }, 
    success: (res) => { 
      // 判断返回的是HTML还是错误文本（比如检查是否包含foods页面的特征标签）
      if (res.includes('<h1>Foods Page</h1>')) { // 假设foods.ejs里有这个标题
        // 替换整个页面的body内容
        document.body.innerHTML = res;
        // 如果foods页面有自定义脚本，需要重新执行（可选）
        // document.querySelectorAll('script').forEach(script => eval(script.textContent));
      } else {
        // 显示错误提示
        document.querySelector("#password").insertAdjacentHTML('afterend', `<p class="error">${res}</p>`);
      }
    }, 
    error: (err) => { 
      alert("failed"); 
    }, 
  }); 
});

⚠️ 注意：这种方式的缺点是浏览器URL不会改变，用户刷新会回到首页；如果foods页面有独立的脚本，可能需要手动重新执行，所以只适合简单的单页场景。

方案3：放弃AJAX，用传统表单提交（最简单） #

如果不需要无刷新的错误提示，直接用传统表单提交更简单：

客户端表单修改 #

恢复表单的默认提交行为：

<form action="/auth" method="POST">
  <input type="email" id="email" name="email" required>
  <input type="password" id="password" name="password" required>
  <button type="submit">登录</button>
  <!-- 错误提示位置（用EJS模板渲染） -->
  <% if (errorMsg) { %>
    <p class="error"><%= errorMsg %></p>
  <% } %>
</form>

服务端代码修改 #

登录成功就跳转，失败就渲染首页并传递错误信息：

app.get("/", (req, res) => { 
  // 渲染首页，默认不传错误信息
  res.render("index", { errorMsg: null }); 
}); 

app.post("/auth", (req, res) => { 
  const userEmail = req.body.email; 
  const password = req.body.password; 
  usersInstance.checkUser(userEmail, password, (err, userExists) => { 
    if (userExists) {
      // 登录成功，跳转到foods页面
      res.redirect('/foods');
    } else {
      // 登录失败，渲染首页并显示错误信息
      res.render('index', { errorMsg: "用户不存在或密码错误" });
    }
  }); 
});

app.get("/foods", (req, res) => {
  res.render('foods.ejs');
});

内容的提问来源于stack exchange，提问作者Umakanth Pendyala