如何从前端下拉列表向Go服务器发送数据

<div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">删除服务</button>
    <ul id="myDropdown" class="dropdown-content">
      {{range .}}
      <li>{{.Id}}</li> <!-- 假设这里显示的是服务的ID -->
      {{end}}
    </ul>
</div>
<script>
  // 现有下拉菜单显示/隐藏逻辑
  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');
        }
      }
    }
  }
</script>

  // 选取所有的 li 元素
  var listItems = document.querySelectorAll('#myDropdown > li');

  // 为每个 li 元素添加点击事件监听器
  for (let li of listItems) {
        li.addEventListener('click', function (event) {
          // 阻止事件冒泡，如果需要的话
          // event.stopPropagation(); 

          // 获取 li 元素的文本内容作为ID
          let id = li.innerText.trim(); // 使用 trim() 移除可能的空白字符
          console.log("Selected ID:", id); // 调试输出

          // ... 后续将通过 AJAX 发送此 ID
      });
  }

  var listItems = document.querySelectorAll('#myDropdown > li');
  for (let li of listItems) {
        li.addEventListener('click', function (event) {
          let id = li.innerText.trim(); // 获取选中的ID

          var xhttp = new XMLHttpRequest(); // 创建 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) {
              // 请求失败，处理错误
              console.error("AJAX request failed with status:", this.status);
            }
          };

          // 打开一个 POST 请求
          // 第一个参数是请求方法 (POST)
          // 第二个参数是目标URL，需要替换为你的服务器端处理路径
          // 第三个参数表示是否异步 (true)
          xhttp.open("POST", "/delete_service", true); // 示例URL，请替换为实际路径

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

          // 发送数据，格式为 "key=value"
          xhttp.send("id=" + encodeURIComponent(id)); // 对ID进行URL编码以确保安全和正确性

          // 可选：关闭下拉菜单
          document.getElementById("myDropdown").classList.remove("show");
      });
  }

package main

import (
    "log"
    "net/http"

    "github.com/julienschmidt/httprouter"
)

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.POST("/delete_service", controller.DeleteServiceHandler) // 新增的POST路由
    // ... 其他路由
}

package controller

import (
    "fmt"
    "net/http"

    "github.com/julienschmidt/httprouter"
)

// DeleteServiceHandler 处理从前端发送的服务删除请求
func DeleteServiceHandler(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
    // 确保请求方法是 POST
    if r.Method != http.MethodPost {
        http.Error(w, "Method Not Allowed", http.StatusMethodNotAllowed)
        return
    }

    // 解析表单数据
    // r.ParseForm() 会解析请求体中的 application/x-www-form-urlencoded 数据
    err := r.ParseForm()
    if err != nil {
        http.Error(w, "Failed to parse form data", http.StatusBadRequest)
        return
    }

    // 从表单数据中获取 'id' 参数
    serviceID := r.FormValue("id")
    if serviceID == "" {
        http.Error(w, "Service ID is missing", http.StatusBadRequest)
        return
    }

    // 打印接收到的ID，进行调试
    fmt.Printf("Received service ID for deletion: %s\n", serviceID)

    // 在这里执行你的业务逻辑，例如：
    // - 验证 serviceID 的有效性
    // - 调用数据库操作删除服务
    // - 根据操作结果返回不同的响应

    // 假设删除成功，返回成功响应
    w.WriteHeader(http.StatusOK)
    w.Header().Set("Content-Type", "text/plain") // 或者 application/json
    fmt.Fprintf(w, "Service with ID %s deleted successfully.", serviceID)

    // 如果操作失败，可以返回错误状态码和消息
    // http.Error(w, "Failed to delete service", http.StatusInternalServerError)
}