NodeJS执行response.render后Handlebars布局无显示无报错问题

核心问题原因 #

• 客户端AJAX请求配置错误：你向/u/player发起POST请求时，服务器返回的是渲染后的HTML字符串，但你在AJAX配置中指定了dataType: "json"，jQuery会强制将返回的HTML按JSON格式解析，解析失败直接触发error回调，因此success中的代码永远不会执行。
• 逻辑流程冲突：你先POST提交track数据请求渲染页面，随后的window.location.href跳转是GET请求，你没有对应GET /u/player的路由处理逻辑，且跳转时POST提交的track数据会完全丢失，自然无法正常渲染页面，直接触发500/404错误。
• 冗余代码冲突：client-routes.js中重复初始化了express实例app，多余的静态资源、urlencoded配置和server.js中的全局配置重复，可能引发未知冲突。

修复方案（二选一即可） #

方案1：无刷新替换页面内容（推荐，无需额外依赖） #

1. 先修改client-routes.js，删除冗余的初始化代码：

var express = require('express');
var router = express.Router();
// 删掉原有var app = express()及后续app.use相关代码，只保留router逻辑

router.use(express.json());

router.post("/player", function(request, response) {
  const t = []
  for(const track of request.body.track_info) {
    t.push({
      image: track[0],
      artist: track[1],
      song: track[2]
    })
  }
  console.log("track_info (objects):",t)
  response.render("player_body", { t })
});

module.exports = router;

2. 修改client.js中嵌套AJAX的配置，调整dataType并直接替换页面内容：

$.ajax({
  url: "/u/player",
  type: "POST",
  data: JSON.stringify({ track_info: res }),
  contentType: "application/json; charset=utf-8",
  dataType: "html", // 改这里，明确接收HTML格式返回
  success: function(html){
    // 直接用返回的渲染结果替换当前页面
    document.open();
    document.write(html);
    document.close();
  },
  error: function(e){
    console.log(e)
  }
})

方案2：页面跳转方案（需要session支持） #

1. 安装express-session依赖：npm install express-session
2. 在server.js中配置session：

const session = require('express-session');
// 放在configRoutes(app)之前添加
app.use(session({
  secret: '自定义加密字符串',
  resave: false,
  saveUninitialized: false
}));

3. 修改client-routes.js，新增GET路由，POST请求改为存储数据后重定向：

var express = require('express');
var router = express.Router();
router.use(express.json());

// 处理POST请求，存数据到session后跳转
router.post("/player", function(request, response) {
  const t = []
  for(const track of request.body.track_info) {
    t.push({
      image: track[0],
      artist: track[1],
      song: track[2]
    })
  }
  request.session.trackList = t; // 存到session
  response.redirect('/u/player'); // 重定向到GET路由
});

// 处理GET跳转请求，渲染页面
router.get("/player", function(request, response) {
  if(!request.session.trackList) return response.redirect('/'); // 无数据时跳回首页
  response.render("player_body", { t: request.session.trackList })
});

module.exports = router;

4. 修改client.js中的嵌套AJAX，不需要再处理跳转：

$.ajax({
  url: "/u/player",
  type: "POST",
  data: JSON.stringify({ track_info: res }),
  contentType: "application/json; charset=utf-8",
  success: function(){
    // 重定向由服务端发起，不需要前端写跳转逻辑
  },
  error: function(e){
    console.log(e)
  }
})

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