Golang中如何将结构体数组传递给HTML模板以填充下拉菜单

Golang中如何将结构体数组传递给HTML模板以填充下拉菜单 大家好，

我对这门语言非常陌生，但我的项目需要使用它。我需要将我的结构体数组传递给HTML模板，以填充一个下拉菜单。我甚至无法传递一个简单的字符串来填充……看起来数据是空的……目标是传递整个结构体数组。在我的代码中，我尝试用其中一个项目来实现。

下拉菜单通过这段代码获得了新行，但里面没有数据。

请大家帮帮我……

这是我的Index.html代码：

<script type="text/javascript">
$(document).ready(function() {
    $("#getKammer").on('click', function() {
        $.ajax({
            url: "http://localhost:8080/getKammer",
            method: "GET",
            success: function(data) {
                var $dropdown = $("#Kammer");
                $dropdown.append($("<option />").val(data).text(this.name));
                $("#getKammer").prop('disabled', true);
            },

        });
    });
});
</script>

这是我的Go代码：

//Klimakammer struct
type klimakammer struct {
	name        string
	hersteller  string
	ip          string
	sollTemp    string
	istTemp     string
	sollFcht    string
	istFcht     string
	kammerstart bool
	kammerstop  bool
}

//Ct01 Klimakammern erstellen
var Ct01 = klimakammer{"ct01", "weiss", "10.0.62.22", "", "", "", "", false, true}

//Kammern - Fill Klimakammer Array
var Kammern = []klimakammer{
	Ct01,
}

var tmpl = template.Must(template.New("tmpl").ParseFiles("./static/Index.html"))

func main() {

	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		if err := tmpl.ExecuteTemplate(w, "Index.html", nil); err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
		}
	})

	http.ListenAndServe(":8080", nil)

	http.HandleFunc("/getKammer", func(w http.ResponseWriter, r *http.Request) {
		fmt.Fprintln(w, Ct01.name)
	})

}

更多关于Golang中如何将结构体数组传递给HTML模板以填充下拉菜单的实战教程也可以访问 https://www.itying.com/category-94-b0.html

3 回复

我试过了，但还是什么都没显示出来。

更多关于Golang中如何将结构体数组传递给HTML模板以填充下拉菜单的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


若要使字段可见，请将其导出（首字母大写）。

在Golang中正确传递结构体数组到HTML模板需要几个关键步骤。你的代码存在几个问题：字段未导出、模板执行错误、路由注册顺序问题。以下是修正后的代码：

1. 修正结构体字段导出问题：

// Klimakammer struct - 字段首字母必须大写才能被模板访问
type Klimakammer struct {
    Name        string
    Hersteller  string
    IP          string
    SollTemp    string
    IstTemp     string
    SollFcht    string
    IstFcht     string
    Kammerstart bool
    Kammerstop  bool
}

// Ct01 Klimakammern erstellen
var Ct01 = Klimakammer{"ct01", "weiss", "10.0.62.22", "", "", "", "", false, true}

// Kammern - Fill Klimakammer Array
var Kammern = []Klimakammer{
    Ct01,
}

2. 修正主函数和路由处理：

var tmpl = template.Must(template.New("tmpl").ParseFiles("./static/Index.html"))

func main() {
    // 先注册路由再启动服务器
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        if err := tmpl.ExecuteTemplate(w, "Index.html", nil); err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }
    })

    http.HandleFunc("/getKammer", func(w http.ResponseWriter, r *http.Request) {
        // 设置JSON响应头
        w.Header().Set("Content-Type", "application/json")
        // 将整个数组编码为JSON
        json.NewEncoder(w).Encode(Kammern)
    })

    http.ListenAndServe(":8080", nil)
}

3. 修正HTML模板中的JavaScript：

<script type="text/javascript">
$(document).ready(function() {
    $("#getKammer").on('click', function() {
        $.ajax({
            url: "http://localhost:8080/getKammer",
            method: "GET",
            dataType: "json", // 指定期望JSON响应
            success: function(data) {
                var $dropdown = $("#Kammer");
                // 清空现有选项
                $dropdown.empty();
                // 添加默认选项
                $dropdown.append($("<option />").val("").text("请选择"));
                
                // 遍历JSON数组填充下拉菜单
                $.each(data, function(index, kammer) {
                    $dropdown.append(
                        $("<option />")
                            .val(kammer.Name)  // 使用导出的字段名
                            .text(kammer.Name + " - " + kammer.Hersteller)
                    );
                });
                
                $("#getKammer").prop('disabled', true);
            },
            error: function(xhr, status, error) {
                console.error("AJAX请求失败:", error);
            }
        });
    });
});
</script>

<!-- 下拉菜单HTML元素 -->
<select id="Kammer" name="Kammer"></select>
<button id="getKammer">加载气候室列表</button>

4. 如果需要直接在模板中渲染（非AJAX方式）：

// 修改根路由处理函数
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    // 传递结构体数组到模板
    data := struct {
        Kammern []Klimakammer
    }{
        Kammern: Kammern,
    }
    
    if err := tmpl.ExecuteTemplate(w, "Index.html", data); err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
})

<!-- 在HTML模板中直接使用 -->
<select id="Kammer" name="Kammer">
    {{range .Kammern}}
    <option value="{{.Name}}">{{.Name}} - {{.Hersteller}}</option>
    {{end}}
</select>

主要修正点：

  1. 结构体字段首字母大写以导出
  2. 使用JSON编码器返回结构化数据
  3. 修正JavaScript中JSON数据的处理
  4. 调整路由注册顺序（ListenAndServe应在最后）
  5. 添加错误处理和数据验证
回到顶部