在 Go Web 应用开发中，下拉选择项是非常常见的表单元素。通过 AJAX 提交下拉选择项，可以避免整页刷新，提升用户体验。下面介绍具体实现方式。
前端页面与下拉框
先准备一个包含下拉框的 HTML 页面，用户选择不同选项时，前端脚本通过 AJAX 把值发给 Go 后端。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉提交示例</title>
</head>
<body>
<select id="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<script>
// 监听下拉框变化事件
document.getElementById('city').addEventListener('change', function() {
var selected = this.value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送选中的值
xhr.send('city=' + encodeURIComponent(selected));
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('服务端返回：' + xhr.responseText);
}
};
});
</script>
</body>
</html>
Go 后端接收处理
使用 Go 标准库 net/http 编写服务端，接收前端 POST 过来的下拉值并返回结果。
package main
import (
"fmt"
"net/http"
)
func submitHandler(w http.ResponseWriter, r *http.Request) {
if r.Method != "POST" {
http.Error(w, "只支持 POST 方法", http.StatusMethodNotAllowed)
return
}
// 解析表单
err := r.ParseForm()
if err != nil {
http.Error(w, "解析失败", http.StatusBadRequest)
return
}
city := r.FormValue("city")
fmt.Fprintf(w, "已收到城市选择：%s", city)
}
func main() {
http.HandleFunc("/submit", submitHandler)
http.ListenAndServe(":8080", nil)
}
关键点说明
- 前端用
change事件捕获下拉选择，避免频繁请求。 - 发送时建议使用
encodeURIComponent处理值，防止特殊字符出错。 - Go 后端通过
r.FormValue直接读取字段，简单可靠。
使用 jQuery 简化 AJAX
如果项目中引入了 jQuery，提交代码可以更简洁：
$('#city').on('change', function() {
$.post('/submit', { city: $(this).val() }, function(data) {
console.log(data);
});
});
常见错误
忘记设置请求头 Content-Type，导致 Go 端 ParseForm 读取不到数据，是新手最常遇到的问题。
| 问题 | 原因 | 解决办法 |
|---|---|---|
| 后端收不到值 | 未设置表单请求头 | 前端加 setRequestHeader |
| 中文乱码 | 未指定页面编码 | HTML 加 meta charset |
掌握上述方法后，在 Go Web 应用里通过 AJAX 提交下拉选择项就十分直观了。实际项目中可结合校验与错误提示，让交互更完善。