Go Web应用中实现HTML下拉列表数据通过AJAX提交至后端服务器

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">选择服务</button>
  <ul id="myDropdown" class="dropdown-content">
    {{range .Services}}
    <li>{{.Id}}</li>
    {{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>

<script>
  // ... (myFunction 和 window.onclick 保持不变) ...

  document.addEventListener('DOMContentLoaded', function() {
    // 选取所有作为下拉内容子元素的<li>
    var listItems = document.querySelectorAll('.dropdown-content > li'); 
    for (let li of listItems) {
      li.addEventListener('click', function(event) {
        let selectedId = li.innerText.trim(); // 获取选中的ID，并去除首尾空白

        // 隐藏下拉列表 (可选，提高用户体验)
        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');
            }
        }

        // 创建XMLHttpRequest对象
        var xhttp = new XMLHttpRequest();

        // 配置请求完成时的回调函数
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            // 请求成功，在此处理服务器响应
            console.log("服务器响应:", this.responseText);
            // 例如：更新页面UI，显示成功消息
          } else if (this.readyState == 4 && this.status !== 200) {
            // 请求失败
            console.error("AJAX请求失败，状态码:", this.status);
            // 例如：显示错误消息给用户
          }
        };

        // 打开一个POST请求到指定URL
        // 请替换 '/submit_selection' 为你的实际后端API路径
        xhttp.open("POST", "/submit_selection", true); 

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

        // 发送数据
        xhttp.send("id=" + encodeURIComponent(selectedId)); // 对数据进行URL编码
      });
    }
  });
</script>