Golang模板 - 如何像参数一样传递JavaScript变量给Go方法

Golang模板 - 如何像参数一样传递JavaScript变量给Go方法 如何将 $row_id 的值作为参数传递给 .GetClients 方法？

$(document).on("click", ".row", function() {
	row_id = $(this).find(".row_id").text();
    {{.GetClients $row_id}}
});
6 回复

谢谢。抱歉回复晚了。论坛冻结了我的账户……

更多关于Golang模板 - 如何像参数一样传递JavaScript变量给Go方法的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


模板：index.js:5：未定义的变量“$client_id”

你的示例中哪里有问题？

JavaScript 在浏览器中运行。Go 模板在页面发送到浏览器之前就已经被求值了。因此，你无法从 JavaScript 向模板传递数据。

是的，请参考之前 @calmh 的评论。另外，也请看看这篇关于在 Go 模板中使用函数的有趣文章。

Calhoun.io

在 Go 模板中使用函数 - Calhoun.io

Go 的模板包提供了许多有用的内置函数。学习使用一些更常见的函数，以及如何向模板添加自定义函数，以便添加您需要的任何功能。

在Go模板中，JavaScript变量无法直接传递给Go方法，因为Go模板在服务器端渲染，而JavaScript在客户端执行。你需要通过HTTP请求将数据发送到服务器。

以下是解决方案：

// 1. 创建HTTP端点处理请求
func (h *Handler) GetClientsHandler(w http.ResponseWriter, r *http.Request) {
    rowID := r.URL.Query().Get("row_id")
    clients, err := h.GetClients(rowID)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    
    json.NewEncoder(w).Encode(clients)
}

// 2. 在模板中使用JavaScript发起请求
<script>
$(document).on("click", ".row", function() {
    const row_id = $(this).find(".row_id").text();
    
    $.ajax({
        url: "/api/clients",
        method: "GET",
        data: { row_id: row_id },
        success: function(data) {
            console.log("获取到的客户端数据:", data);
            // 处理返回的数据
        },
        error: function(error) {
            console.error("请求失败:", error);
        }
    });
});
</script>

// 3. 路由配置
http.HandleFunc("/api/clients", handler.GetClientsHandler)

// 4. 如果需要在模板中预渲染数据，可以这样使用
// 模板文件
{{range .PreloadedClients}}
<div class="row" data-row-id="{{.ID}}">
    {{.Name}}
</div>
{{end}}

// 处理器
func (h *Handler) PageHandler(w http.ResponseWriter, r *http.Request) {
    data := struct {
        PreloadedClients []Client
    }{
        PreloadedClients: h.GetPreloadedClients(),
    }
    
    tmpl.Execute(w, data)
}

关键点：

  1. Go模板在服务器端执行，JavaScript在浏览器执行
  2. 需要通过AJAX请求将JavaScript变量发送到Go后端
  3. 使用HTTP处理函数接收参数并调用相应方法
  4. 返回JSON格式数据供前端使用
回到顶部