使用jQuery POST请求无法渲染express-handlebars页面的解决方案咨询

你遇到的核心问题在于表单提交和AJAX POST请求的本质差异：表单提交是浏览器发起的同步请求，后端返回HTML后浏览器会自动替换当前页面；而jQuery的$.post是异步AJAX请求，后端返回的HTML只会作为响应数据传递给前端JS，浏览器不会自动加载渲染这个页面。

下面给你三种实用的解决方案，适配不同的场景需求：

方案1：AJAX回调手动处理页面渲染 #

适合需要先完成额外逻辑（比如数据校验、动画效果、日志上报等），再加载新页面的场景。

前端代码调整 #

在$.post的成功回调里，手动处理后端返回的HTML内容：

function ButtonClickGoToNewsPage(){
  // 先执行你的额外功能，比如：
  console.log("执行前置校验/日志上报...");
  
  // 发起POST请求
  $.post('/gotonewspage', function(pageHtml) {
    // 直接用返回的HTML替换整个页面，效果和表单提交一致
    $('html').html(pageHtml);
    // 如果你有单独的NewsPage GET路由（比如/news），也可以直接跳转：
    // window.location.href = '/news';
  })
  .fail(function(error) {
    console.error("请求失败，请检查：", error);
  });
}

后端代码无需修改 #

保持你原有的ShowTrangQuanLi函数即可，它依然会返回渲染好的NewsPage HTML，前端通过回调拿到后手动替换页面。

方案2：后端返回重定向指令 #

如果你的NewsPage本身可以通过GET方式访问（比如有一个/news路由负责渲染页面），可以让后端区分AJAX请求和普通表单请求，返回重定向地址让前端跳转。

后端代码修改 #

ShowTrangQuanLi(req, res) {
  // 判断是否为AJAX请求
  if (req.xhr) {
    // 返回重定向地址的JSON数据
    return res.json({ redirectUrl: '/news' });
  }
  // 普通表单请求，正常渲染页面
  res.render('NewsPage', { layout: 'LMain' });
}

前端代码调整 #

function ButtonClickGoToNewsPage(){
  // 执行额外功能
  console.log("执行前置操作...");
  
  $.post('/gotonewspage', function(response) {
    if (response.redirectUrl) {
      // 跳转到指定页面
      window.location.href = response.redirectUrl;
    }
  })
  .fail(function(error) {
    console.error("请求失败：", error);
  });
}

方案3：动态创建表单提交 #

如果你的额外功能不需要异步执行，也可以通过JS动态创建表单并提交，既完成额外操作，又利用浏览器的默认表单提交行为，无需修改后端代码：

function ButtonClickGoToNewsPage(){
  // 执行额外功能
  console.log("执行前置逻辑...");
  
  // 动态创建表单
  const form = document.createElement('form');
  form.action = '/gotonewspage';
  form.method = 'POST';
  
  // 如果需要传递额外参数，可以添加隐藏域
  // const hiddenInput = document.createElement('input');
  // hiddenInput.type = 'hidden';
  // hiddenInput.name = 'extraParam';
  // hiddenInput.value = 'yourValue';
  // form.appendChild(hiddenInput);
  
  // 提交表单
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
}

这种方式的效果和原生表单提交完全一致，同时能在提交前完成你的额外操作。

内容的提问来源于stack exchange，提问作者Quốc Thiệu