Go Template中实现无刷新表单提交：利用AJAX与FormData

<form action="/search" method="post" id="search-form">
    <input type="search" name="search" placeholder="输入搜索关键词">
    <input type="submit" value="搜索">
</form>

<div id="results-container">
    <!-- 搜索结果将在这里异步加载 -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 当文档加载完成后执行
    $(document).ready(function() {
        // 监听ID为 'search-form' 的表单的提交事件
        $("#search-form").submit(function(event) {
            // 阻止表单的默认提交行为，即阻止页面刷新
            event.preventDefault();

            // 创建一个FormData对象，用于封装表单数据
            let formData = new FormData();

            // 遍历表单中的所有输入字段，并将它们添加到FormData对象中
            // $(this).serializeArray() 将表单数据序列化为 name-value 对象的数组
            $.each($(this).serializeArray(), function (key, input) {
                formData.append(input.name, input.value);
            });

            // 使用Axios发送POST请求到后端
            // "/search" 是你后端处理搜索请求的URL
            axios.post("/search", formData)
                .then(function (response) {
                    // 请求成功后的处理
                    console.log("搜索成功！", response.data);
                    // 假设后端返回的是HTML片段或JSON数据，用于更新页面
                    // 例如，如果后端返回HTML：
                    $("#results-container").html(response.data.htmlContent || "没有找到结果");
                    // 如果后端返回JSON数据，可以根据数据构建HTML
                    // updateResultsDisplay(response.data);
                })
                .catch(function (error) {
                    // 请求失败后的处理
                    console.error("搜索失败！", error);
                    $("#results-container").html("<p style='color: red;'>搜索失败，请重试。</p>");
                });
        });
    });
</script>

package main

import (
    "html/template"
    "log"
    "net/http"
)

// SearchResult 结构体用于模拟搜索结果
type SearchResult struct {
    Query   string
    Results []string
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        tmpl, err := template.ParseFiles("index.html") // 假设你的HTML文件名为index.html
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }
        tmpl.Execute(w, nil)
    })

    http.HandleFunc("/search", func(w http.ResponseWriter, r *http.Request) {
        if r.Method != http.MethodPost {
            http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
            return
        }

        // 解析表单数据
        // 对于multipart/form-data，通常需要调用ParseMultipartForm或ParseForm
        // FormData对象发送的数据，Go会自动识别并解析
        err := r.ParseForm() // 或者 r.ParseMultipartForm(10 << 20)
        if err != nil {
            http.Error(w, "Failed to parse form data", http.StatusBadRequest)
            return
        }

        searchQuery := r.PostFormValue("search") // 获取名为 "search" 的字段值

        log.Printf("Received search query: %s", searchQuery)

        // 模拟搜索逻辑
        var results []string
        if searchQuery != "" {
            results = append(results, "结果1: "+searchQuery)
            results = append(results, "结果2: "+searchQuery+"相关")
        } else {
            results = append(results, "请输入关键词进行搜索")
        }

        // 构建要返回给前端的数据
        // 可以返回JSON或直接返回HTML片段
        data := struct {
            HTMLContent string `json:"htmlContent"`
            // 其他数据...
        }{
            HTMLContent: formatResultsAsHTML(results),
        }

        w.Header().Set("Content-Type", "application/json")
        // 将数据编码为JSON并发送回客户端
        json.NewEncoder(w).Encode(data)
    })

    log.Println("Server started at :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

// formatResultsAsHTML 辅助函数，将结果格式化为HTML字符串
func formatResultsAsHTML(results []string) string {
    if len(results) == 0 {
        return "<p>没有找到相关结果。</p>"
    }
    html := "<ul>"
    for _, res := range results {
        html += "<li>" + template.HTMLEscapeString(res) + "</li>"
    }
    html += "</ul>"
    return html
}