如何在单个Go Handler中返回多个独立HTML文件供AJAX分发至指定HTML字段？

实现思路 #

后端在submitHandler中渲染多个独立的HTML模板片段，将它们封装成JSON格式返回；前端通过AJAX请求该接口，解析JSON后将对应的HTML片段插入到页面指定的DOM容器中。

前端HTML代码（含AJAX逻辑） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多HTML片段示例</title>
</head>
<body>
    <button id="fetchBtn">获取HTML片段</button>
    <div id="field1"></div>
    <div id="field2"></div>

    <script>
        document.getElementById('fetchBtn').addEventListener('click', function() {
            // 使用fetch发起AJAX请求
            fetch('/submit', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    // 将返回的HTML片段插入到对应容器
                    document.getElementById('field1').innerHTML = data.fragment1;
                    document.getElementById('field2').innerHTML = data.fragment2;
                })
                .catch(error => console.error('请求失败:', error));
        });
    </script>
</body>
</html>

后端Go代码（基于net/http和html/template） #

假设项目目录下存在两个独立的HTML模板文件：fragment1.html和fragment2.html，内容为需要插入到对应页面容器的HTML片段。

package main

import (
    "encoding/json"
    "html/template"
    "net/http"
    "strings"

    "github.com/gorilla/context"
)

func indexHandler(w http.ResponseWriter, r *http.Request) {
    tpl.ExecuteTemplate(w, "index.html", nil)
}

func submitHandler(w http.ResponseWriter, r *http.Request) {
    // 设置响应头为JSON格式
    w.Header().Set("Content-Type", "application/json")

    // 渲染第一个HTML片段
    var fragment1 strings.Builder
    if err := tpl.ExecuteTemplate(&fragment1, "fragment1.html", nil); err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    // 渲染第二个HTML片段
    var fragment2 strings.Builder
    if err := tpl.ExecuteTemplate(&fragment2, "fragment2.html", nil); err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    // 将片段封装为JSON对象并返回
    response := map[string]string{
        "fragment1": fragment1.String(),
        "fragment2": fragment2.String(),
    }
    if err := json.NewEncoder(w).Encode(response); err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
}

var tpl *template.Template

func main() {
    // 解析所有HTML模板文件（包括index.html、fragment1.html、fragment2.html）
    var err error
    tpl, err = template.ParseGlob("*.html")
    if err != nil {
        panic(err)
    }

    http.HandleFunc("/", indexHandler)
    http.HandleFunc("/submit", submitHandler)
    http.ListenAndServe(":8080", context.ClearHandler(http.DefaultServeMux))
}

补充说明 #

• fragment1.html和fragment2.html只需包含对应片段的HTML代码，无需完整的HTML文档结构。
• 若需向模板传递动态数据，可在ExecuteTemplate的第三个参数位置传入对应的数据对象。
• 前端也可使用XMLHttpRequest替代fetch，核心逻辑保持一致：发起请求、解析JSON、插入DOM。

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