在Go Web应用开发中，前端下拉列表的数据提交是常见需求，使用AJAX可以在不刷新页面的情况下将选中数据发送到服务器，提升用户操作体验。下面我们分步骤实现完整的流程。
前端下拉列表与AJAX实现
首先我们需要在前端页面中创建下拉列表元素，然后编写JavaScript代码获取选中值并通过AJAX发送请求。
HTML下拉列表结构
使用<select>标签创建下拉列表，给元素设置唯一的id方便后续获取：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>下拉列表AJAX提交</title>
</head>
<body>
<select id="citySelect">
<option value="">请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<button id="submitBtn">提交选中数据</button>
<div id="result"></div>
</body>
</html>
AJAX发送请求代码
使用原生JavaScript编写AJAX逻辑，获取下拉列表的选中值，通过POST请求发送到Go服务器：
// 获取按钮和下拉列表元素
const submitBtn = document.getElementById('submitBtn');
const citySelect = document.getElementById('citySelect');
const resultDiv = document.getElementById('result');
submitBtn.addEventListener('click', function() {
// 获取下拉列表选中的值
const selectedValue = citySelect.value;
// 如果没有选中有效值，提示用户
if (!selectedValue) {
resultDiv.textContent = '请先选择城市';
return;
}
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 配置请求方法和地址，这里指向Go服务的接口
xhr.open('POST', '/api/submit-city', true);
// 设置请求头，表明发送的是表单数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 监听请求状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resultDiv.textContent = '提交成功，服务器返回：' + xhr.responseText;
} else {
resultDiv.textContent = '提交失败，错误码：' + xhr.status;
}
}
};
// 发送请求，携带选中数据
xhr.send('city=' + encodeURIComponent(selectedValue));
});
Go后端接收处理数据
接下来编写Go Web服务端代码，接收前端发送的AJAX请求，解析下拉列表数据并返回响应。
基础服务搭建
使用Go标准库的net/http包搭建Web服务，注册对应的路由处理函数：
package main
import (
"fmt"
"net/http"
)
// 处理AJAX提交的处理器函数
func submitCityHandler(w http.ResponseWriter, r *http.Request) {
// 只允许POST请求
if r.Method != http.MethodPost {
w.WriteHeader(http.StatusMethodNotAllowed)
fmt.Fprintf(w, "不支持的请求方法")
return
}
// 解析表单数据
err := r.ParseForm()
if err != nil {
w.WriteHeader(http.StatusBadRequest)
fmt.Fprintf(w, "解析请求数据失败")
return
}
// 获取下拉列表提交的city参数
city := r.FormValue("city")
if city == "" {
w.WriteHeader(http.StatusBadRequest)
fmt.Fprintf(w, "未获取到城市数据")
return
}
// 这里可以添加业务逻辑，比如存储到数据库等
fmt.Printf("接收到前端提交的城市数据：%sn", city)
// 返回响应给前端
w.WriteHeader(http.StatusOK)
fmt.Fprintf(w, "已成功接收城市数据：" + city)
}
func main() {
// 注册静态文件路由，用于访问前端HTML页面
http.Handle("/", http.FileServer(http.Dir("./static")))
// 注册AJAX接口路由
http.HandleFunc("/api/submit-city", submitCityHandler)
// 启动服务，监听8080端口
fmt.Println("服务启动，监听端口8080")
err := http.ListenAndServe(":8080", nil)
if err != nil {
fmt.Printf("服务启动失败：%vn", err)
}
}
项目结构说明
完整的项目结构可以按照以下方式组织：
- 项目根目录
- main.go：Go服务端代码文件
- static目录：存放前端静态文件，比如上面的HTML页面
测试验证流程
完成代码编写后，按照以下步骤测试功能是否正常：
- 将前端HTML文件放到static目录下
- 运行Go程序，启动Web服务
- 在浏览器中访问
http://127.0.0.1:8080，打开前端页面 - 选择下拉列表中的任意城市，点击提交按钮
- 查看页面提示和Go服务端的终端输出，确认数据正常接收
常见问题说明
在实际开发中可能会遇到以下问题：
- 跨域问题：如果前端和后端不在同一个域，需要在Go服务端添加跨域处理中间件
- 数据编码问题：前端发送数据时使用
encodeURIComponent编码，后端会自动解析，避免中文乱码 - 请求方法错误：确保前端AJAX使用的是POST方法，和后端处理器允许的方法一致
Go_WebAJAX下拉列表JavaScript修改时间：2026-07-12 01:54:28