Node.js环境下实现页面无刷新更新数据时hbs文件找不到如何解决

问题原因 #

1. 你当前代码存在两处低级拼写错误：
   • 第一个DOM选择器#contenUpdate少写了字母t，正确应为#contentUpdate
   • $.ajaxSetup配置项拼写错误，cach应为cache
2. 核心报错原因：.hbs是Handlebars服务端模板文件，默认存放在Node项目的views目录下，不会作为静态资源直接对外开放，前端直接通过load("abc.hbs")请求该路径，服务端没有对应路由处理，自然会返回文件未找到的错误。

解决方法 #

方案一（推荐，保留服务端模板渲染能力）

1. 先在你的Node服务端新增路由，返回渲染后的abc.hbs内容，以常用的Express框架为例：

// 服务端新增路由规则
app.get('/get-abc-content', (req, res) => {
  // 渲染abc.hbs模板，支持传入动态数据
  res.render('abc', {
    // 此处填写abc.hbs需要的动态参数
  })
})

2. 修改前端代码，将load的目标路径替换为你新增的路由地址：

$(document).ready(function(){
    // 修正选择器拼写
    $("#contentUpdate").load("/get-abc-content");
    var refreshId = 
    setInterval(function(){
        $("#contentUpdate").load("/get-abc-content");
    }, 1000);
    // 修正cache拼写
    $.ajaxSetup({cache:false});
})

方案二（仅适用不需要动态渲染模板的场景）

如果你不需要服务端渲染hbs里的变量，只想直接返回模板原始内容，可以直接把abc.hbs文件放到Node服务端配置的静态资源目录（通常为public文件夹）下，前端就能直接请求到该文件，无需额外配置路由。但这种方式会暴露模板原始语法，且无法实现动态数据填充，不推荐使用。

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