在Go Web应用中通过AJAX发送下拉列表数据至服务器

<div class="dropdown">
    <button class="dropbtn">选择服务</button>
    <ul id="myDropdown" class="dropdown-content">
      {{range .Services}}
      <li>{{.Id}} - {{.Name}}</li> <!-- 假设.Id是唯一标识符 -->
      {{end}}
    </ul>
</div>

// 获取所有的列表项
var listItems = document.querySelectorAll('#myDropdown > li');

// 为每个列表项添加点击事件监听器
for (let li of listItems) {
    li.addEventListener('click', function (event) {
        // 从列表项的文本内容中提取ID
        // 假设ID是文本内容的第一部分，例如 "123 - 服务名称"
        let fullText = li.innerText;
        let id = fullText.split(' ')[0]; // 简单分割获取ID

        console.log("Selected ID:", id); // 调试输出，确认ID已捕获
        // 接下来将使用AJAX发送这个ID到服务器
        sendDataToServer(id); 
    });
}

// 辅助函数，用于处理下拉菜单的显示/隐藏，与数据发送无关
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

function sendDataToServer(id) {
    var xhttp = new XMLHttpRequest();

    // 配置请求完成后的回调函数
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // 请求成功并收到响应
            console.log("Server Response:", this.responseText);
            // 在这里处理服务器的响应，例如更新UI或显示成功消息
        } else if (this.readyState == 4 && this.status !== 200) {
            // 请求完成但状态码不是200，表示有错误
            console.error("Error sending data:", this.status, this.statusText);
            // 处理错误情况，例如显示错误消息
        }
    };

    // 准备POST请求
    // 第一个参数是请求方法 (POST)
    // 第二个参数是服务器接收数据的URL路径 (需要替换为你的实际路径)
    // 第三个参数是异步标志 (true表示异步)
    xhttp.open("POST", "/add_uslugu", true); 

    // 设置请求头，告知服务器发送的数据类型是URL编码的表单数据
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // 发送数据
    // 数据格式为 "key=value"，多个参数用 "&" 连接
    xhttp.send("id=" + id);
}

package main

import (
    "log"
    "net/http"
    "github.com/julienschmidt/httprouter"
    "your_project/controller" // 假设控制器文件在 'your_project/controller'
)

func main() {
    r := httprouter.New()
    routes(r) // 配置路由
    log.Println("Server starting on :4444")
    err := http.ListenAndServe("localhost:4444", r)
    if err != nil {
        log.Fatal(err)
    }
}

func routes(r *httprouter.Router) {
    // 静态文件服务
    r.ServeFiles("/public/*filepath", http.Dir("public"))
    // 其他GET/POST路由
    r.GET("/", controller.StartPage)
    r.GET("/auth", controller.LoginPage)
    r.POST("/login", controller.Log_in)
    // 接收下拉列表数据的POST请求
    r.POST("/add_uslugu", controller.AddFromHTML) 
}

package controller

import (
    "fmt"
    "net/http"
    "github.com/julienschmidt/httprouter"
)

// AddFromHTML 处理从HTML页面通过AJAX提交的服务ID
func AddFromHTML(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
    // 确保请求方法是POST (httprouter已处理，但明确检查是好习惯)
    if r.Method != http.MethodPost {
        http.Error(w, "Method Not Allowed", http.StatusMethodNotAllowed)
        return
    }

    // 解析表单数据。对于 application/x-www-form-urlencoded 类型的数据，
    // r.ParseForm() 会解析请求体并填充 r.Form 字段。
    err := r.ParseForm()
    if err != nil {
        http.Error(w, "Failed to parse form data", http.StatusBadRequest)
        return
    }

    // 从解析后的表单数据中获取 "id" 参数的值
    selectedID := r.FormValue("id")
    if selectedID == "" {
        http.Error(w, "Missing 'id' parameter", http.StatusBadRequest)
        return
    }

    // 至此，selectedID 变量中包含了从客户端发送过来的服务ID
    // 在这里可以执行你的业务逻辑，例如：
    // - 根据ID查询数据库
    // - 更新某个服务状态
    // - 记录操作日志等
    fmt.Printf("Server received selected ID: %s\n", selectedID)

    // 向客户端发送响应
    // 可以发送JSON、纯文本或其他格式的响应
    w.Header().Set("Content-Type", "text/plain") // 设置响应头
    w.WriteHeader(http.StatusOK) // 设置HTTP状态码为200 OK
    fmt.Fprintf(w, "Successfully processed ID: %s", selectedID) // 发送响应体
}