如何使用jQuery、Express和Handlebars实现无刷新加载页面？

1. 服务端基础配置 #

首先安装所需依赖：express、hbs（Handlebars的Express适配包），基础服务配置示例如下：

const express = require('express')
const hbs = require('hbs')
const app = express()

// 配置Handlebars模板引擎
app.set('view engine', 'hbs')
app.set('views', './views') // 模板文件统一存放在项目根目录的views文件夹下
// 配置静态资源目录，存放jQuery、样式表等静态文件
app.use(express.static('./public'))

2. 路由配置 #

需要配置两类路由，一类返回完整页面，一类返回渲染后的页面HTML片段：

// 首页路由，返回完整的站点页面
app.get('/', (req, res) => {
  res.render('home')
})

// 关于页接口，返回渲染完成的HTML片段
// *注意需要关闭默认布局，避免返回重复的公共head、导航等结构*
app.get('/api/about', (req, res) => {
  res.render('about', {
    // 此处可传入模板渲染需要的动态数据
    currentTime: new Date().toLocaleString(),
    layout: false
  }, (err, html) => {
    if (err) return res.status(500).send('页面加载失败')
    res.send(html)
  })
})

app.listen(3000, () => console.log('服务已启动，访问地址：http://localhost:3000'))

3. Handlebars模板结构 #

在views文件夹下创建3个模板文件：

• layout.hbs 公共布局文件，存放全站公共的结构：

<!DOCTYPE html>
<html>
<head>
  <title>站点示例</title>
  <script src="/js/jquery.min.js"></script>
</head>
<body>
  <nav>
    <button id="loadAbout">加载关于页</button>
  </nav>
  <!-- 页面内容容器，所有页面内容都会插入到此处 -->
  <div id="pageContainer">
    {{{body}}}
  </div>
</body>
</html>

• home.hbs 首页内容模板：

<h1>首页</h1>
<p>这是首页的静态/动态内容</p>

• about.hbs 关于页内容模板，仅需写页面本身的内容，无需包含完整HTML结构：

<h1>关于我们</h1>
<p>页面渲染时间：{{currentTime}}</p>
<p>这是关于页的自定义内容</p>

4. 前端AJAX交互逻辑 #

将以下代码写入公共布局layout.hbs的body末尾，或单独存为js文件引入：

$(function() {
  $('#loadAbout').click(function() {
    $.ajax({
      url: '/api/about',
      method: 'GET',
      success: function(resHtml) {
        // 直接将服务端返回的渲染后HTML插入到内容容器即可
        $('#pageContainer').html(resHtml)
      },
      error: function() {
        alert('关于页加载失败，请稍后重试')
      }
    })
  })
})

常见问题排查 #

• 如果返回内容包含重复的head、body标签，确认/api/about路由的res.render参数中是否添加了layout: false
• 如果模板动态参数不显示，确认调用res.render时是否正确传入了对应的参数
• 如果请求报404，确认接口路径、静态资源目录配置是否正确

内容的提问来源于stack exchange，提问作者Himanshu Singh Chauhan