使用Golang填充下拉菜单并获取网页文本框内容
使用Golang填充下拉菜单并获取网页文本框内容 大家好，
我目前正在尝试为我的项目创建一个文件服务器。 我需要用一个结构体数组来填充一个下拉菜单，获取下拉框中选中项的名称，并且需要从Go中读取HTML文本字段内的字符串，但我不知道如何实现。请给我一些代码示例，因为我是这门语言的新手，不太理解。
以下是我的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,
}
func main() {
fs := http.FileServer(http.Dir("./static"))
http.Handle("/", fs)
http.ListenAndServe(":8080", nil)
http.HandleFunc("/getKammer", func(w http.ResponseWriter, r *http.Request) {
//结构体数组kammern应该在这里传递给下拉菜单
})
}
以下是我的Func.js代码：-> 这是一个当你通过按钮启动程序时触发的onClick函数
function fillChoiceBox() {
var x = document.getElementById("Kammer"); // 下拉菜单的ID
//循环遍历结构体数组
var option = document.createElement("option");
option.text = //每个单独的Chamber/kammer作为选项，例如Ct01.name
x.add(option);
}
更多关于使用Golang填充下拉菜单并获取网页文本框内容的实战教程也可以访问 https://www.itying.com/category-94-b0.html
6 回复
而那是我之前的尝试，因为使用了 HandleFunc “/getKammer”
// $.ajax({
// url: "http://localhost:8080/getKammer",
// method: "GET",
// function(data) {
// var $dropdown = $("#Kammer");
// $dropdown.append($("<option />").val(data).text(this.name));
// $("#getKammer").prop('disabled', true);
// $dropdown.append("<option>hallooo</option>")
// document.getElementById("status").value = "es funktioniert yee";
// },
// });
将其编码为JSON：
package main
import (
"encoding/json"
"fmt"
)
type Klimakammer struct {
Name string `json:"name"`
Hersteller string `json:"hersteller"`
Ip string `json:"ip"`
SollTemp string `json:"sollTemp"`
IstTemp string `json:"istTemp"`
SollFcht string `json:"sollFcht"`
IstFcht string `json:"istFcht"`
Kammerstart bool `json:"kammerstart"`
Kammerstop bool `json:"makkerstop"`
}
var Ct01 = Klimakammer{"ct01", "weiss", "10.0.62.22", "", "", "", "", false, true}
var Kammern = []Klimakammer{
Ct01,
}
func main() {
buff, _ := json.Marshal(&Kammern)
fmt.Println(string(buff))
}
输出：
[{
"name": "ct01",
"hersteller": "weiss",
"ip": "10.0.62.22",
"sollTemp": "",
"istTemp": "",
"sollFcht": "",
"istFcht": "",
"kammerstart": false,
"makkerstop": true
}]
参见 https://play.golang.org/p/w_v_Ujg2ZZd
请注意，只有导出的字段才能像这样被序列化！
以下是实现你需求的完整代码示例：
Go后端代码：
package main
import (
"encoding/json"
"net/http"
)
// Klimakammer struct
type klimakammer struct {
Name string `json:"name"`
Hersteller string `json:"hersteller"`
IP string `json:"ip"`
SollTemp string `json:"sollTemp"`
IstTemp string `json:"istTemp"`
SollFcht string `json:"sollFcht"`
IstFcht string `json:"istFcht"`
Kammerstart bool `json:"kammerstart"`
Kammerstop bool `json:"kammerstop"`
}
// Ct01 Klimakammern erstellen
var Ct01 = klimakammer{"ct01", "weiss", "10.0.62.22", "", "", "", "", false, true}
// Kammern - Fill Klimakammer Array
var Kammern = []klimakammer{
Ct01,
{"ct02", "weiss", "10.0.62.23", "", "", "", "", false, true},
{"ct03", "weiss", "10.0.62.24", "", "", "", "", false, true},
}
func main() {
fs := http.FileServer(http.Dir("./static"))
http.Handle("/", fs)
http.HandleFunc("/getKammern", func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(Kammern)
})
http.HandleFunc("/getSelected", func(w http.ResponseWriter, r *http.Request) {
if r.Method != "POST" {
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
return
}
kammerName := r.FormValue("kammerName")
textFieldValue := r.FormValue("textField")
for _, kammer := range Kammern {
if kammer.Name == kammerName {
response := map[string]interface{}{
"selectedKammer": kammer,
"textFieldValue": textFieldValue,
}
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(response)
return
}
}
http.Error(w, "Kammer not found", http.StatusNotFound)
})
http.ListenAndServe(":8080", nil)
}
HTML文件 (static/index.html)：
<!DOCTYPE html>
<html>
<head>
<title>Klimakammer Control</title>
</head>
<body>
<h1>Klimakammer Selection</h1>
<select id="kammerSelect">
<option value="">Select a chamber</option>
</select>
<br><br>
<input type="text" id="textField" placeholder="Enter text here">
<br><br>
<button onclick="getSelectedData()">Get Selected Data</button>
<div id="result"></div>
<script>
// 页面加载时填充下拉菜单
document.addEventListener('DOMContentLoaded', function() {
fetch('/getKammern')
.then(response => response.json())
.then(data => {
const select = document.getElementById('kammerSelect');
data.forEach(kammer => {
const option = document.createElement('option');
option.value = kammer.name;
option.textContent = kammer.name;
select.appendChild(option);
});
})
.catch(error => console.error('Error:', error));
});
function getSelectedData() {
const selectedKammer = document.getElementById('kammerSelect').value;
const textFieldValue = document.getElementById('textField').value;
const formData = new FormData();
formData.append('kammerName', selectedKammer);
formData.append('textField', textFieldValue);
fetch('/getSelected', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerHTML = `
<h3>Selected Kammer:</h3>
<p>Name: ${data.selectedKammer.name}</p>
<p>IP: ${data.selectedKammer.ip}</p>
<p>Text Field Value: ${data.textFieldValue}</p>
`;
})
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>
如果你需要保持原有的Func.js结构：
function fillChoiceBox() {
fetch('/getKammern')
.then(response => response.json())
.then(data => {
var x = document.getElementById("Kammer");
data.forEach(kammer => {
var option = document.createElement("option");
option.value = kammer.name;
option.text = kammer.name;
x.add(option);
});
})
.catch(error => console.error('Error:', error));
}
function getSelectedData() {
var selectedKammer = document.getElementById("Kammer").value;
var textFieldValue = document.getElementById("textField").value;
var formData = new FormData();
formData.append('kammerName', selectedKammer);
formData.append('textField', textFieldValue);
fetch('/getSelected', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Selected Kammer:', data.selectedKammer);
console.log('Text Field Value:', data.textFieldValue);
})
.catch(error => console.error('Error:', error));
}
这个实现提供了：
/getKammern端点返回JSON格式的结构体数组- 前端JavaScript使用fetch API获取数据并填充下拉菜单
/getSelected端点处理POST请求，接收下拉菜单选中项和文本框内容- 结构体字段添加了JSON标签以便正确序列化
- 完整的错误处理和HTTP方法检查
