本文介绍如何结合 go http 服务与 html 模板，通过 ajax 动态加载内容实现类似 facebook 的“加载更多”功能，无需整页刷新，兼顾可维护性与性能。

本文介绍如何结合 go http 服务与 html 模板，通过 ajax 动态加载内容实现类似 facebook 的“加载更多”功能，无需整页刷新，兼顾可维护性与性能。

在 Go Web 开发中，使用 html/template 渲染静态页面非常便捷，但要实现现代单页体验（如滚动加载旧帖），需将服务端模板能力与客户端异步请求协同设计。核心思路是：服务端提供可复用的模板片段（{{block}}），客户端通过 AJAX 获取该片段的渲染结果，并动态插入 DOM——而非返回 JSON 再由 JS 拼接 HTML（易出 XSS，且违背 Go 模板的设计哲学）。

✅ 关键技术要点

• 模板复用：使用 {{block "name" .}}...{{end}} 定义可独立渲染的区块（如帖子列表），既可用于首次完整页面渲染，也可用于后续 AJAX 局部更新。
• 按需渲染：Go 处理 /posts/ 时执行完整模板；处理 /posts/more 时仅执行 batch block，返回纯 HTML 片段。
• DOM 替换策略：前端用 <div id="nextBatch"> 占位，AJAX 成功后直接用 <code>outerHTML 替换自身，新内容自动包含下一个占位符，形成递归加载链。

  ? 完整示例代码

  1. 数据结构与模板（page.html）

  <html><body><h2>Posts</h2>
  {{block "batch" .}}
      {{range .posts}}
          <div><b>{{.Time}} {{.User}}:</b> {{.Text}}</div>
      {{end}}
      <div id="nextBatch"></div>
  {{end}}
  <button onclick="loadMore()">Load more</button>
  <script>
  function loadMore() {
      const placeholder = document.getElementById("nextBatch");
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                  placeholder.outerHTML = xhr.responseText; // 替换占位符及内容
              } else {
                  console.error("Failed to load more posts:", xhr.statusText);
              }
          }
      };
      xhr.open("GET", "/posts/more", true);
      xhr.send();
  }
  </script>
  </body></html>

  2. Go 后端逻辑

  type Post struct {
      User, Time, Text string
  }
  
  var t = template.Must(template.New("").ParseFiles("page.html"))
  
  func produceTime() string {
      // 简化演示：实际应从数据库获取时间戳或游标
      staticTime := time.Now()
      return staticTime.Format("15:04:05")
  }
  
  func postsHandler(w http.ResponseWriter, r *http.Request) {
      // 模拟分页数据（生产环境应基于 offset/cursor + limit 查询）
      posts := []Post{
          {User: "Bob", Time: produceTime(), Text: "The weather is nice."},
          {User: "Alice", Time: produceTime(), Text: "It's raining."},
      }
  
      data := map[string]interface{}{"posts": posts}
  
      switch r.URL.Path {
      case "/posts/":
          t.Execute(w, data) // 渲染完整页面
      case "/posts/more":
          t.ExecuteTemplate(w, "batch", data) // 仅渲染 block 片段
      default:
          http.Error(w, "Not found", http.StatusNotFound)
      }
  }
  
  func main() {
      http.HandleFunc("/posts/", postsHandler)
      fmt.Println("Server running on :8080")
      http.ListenAndServe(":8080", nil)
  }

  ⚠️ 注意事项与进阶建议

  • 分页状态管理：当前示例每次返回固定 2 条模拟数据。真实场景需在客户端记录上一批最后一条的 id 或 created_at，通过 URL 参数（如 /posts/more?after=123）传给服务端，后端据此查询后续数据。
  • 错误处理强化：前端应增加网络超时、重试机制；服务端需校验参数并返回合适的 HTTP 状态码（如 404 表示无更多数据）。
  • SEO 与初始加载：首屏内容必须由服务端直出（已满足），确保搜索引擎可抓取；“加载更多”仅为增强体验。
  • 性能优化：高并发下避免模板重复解析，template.Must(template.Parse(...)) 应在 init() 或 main() 中一次性完成；对大量数据，考虑添加缓存层（如 Redis 存储预渲染片段）。
  • 安全防护：Go 模板默认转义 HTML，但若需渲染富文本，务必使用 template.HTML 并严格过滤 XSS 风险内容。

  此方案平衡了 Go 的服务端渲染优势与前端交互灵活性，代码简洁、逻辑清晰，是构建高性能内容流应用的推荐实践。