Go Web 应用中通过 AJAX 提交下拉选择项的实践指南

<!-- HTML 结构示例 (由 Go 模板渲染) -->
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">选择服务</button>
  <ul id="myDropdown" class="dropdown-content">
    {{range .Services}}
    <li data-id="{{.Id}}">{{.Name}}</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');
        }
      }
    }
  }

  // 捕获列表项点击事件并获取数据
  document.addEventListener('DOMContentLoaded', function() {
    var listItems = document.querySelectorAll('#myDropdown li');
    listItems.forEach(function(li) {
      li.addEventListener('click', function(event) {
        // 假设 li 的 innerText 或 data-id 属性是我们需要发送的数据
        var selectedId = li.dataset.id || li.innerText;
        console.log("Selected ID:", selectedId);
        // 在此处调用发送数据的函数
        sendDataToServer(selectedId);
      });
    });
  });
</script>

/**
 * 将选定的数据通过 AJAX 发送到服务器
 * @param {string} id - 要发送的数据标识符
 */
function sendDataToServer(id) {
  var xhttp = new XMLHttpRequest();

  // 1. 定义请求状态变化时的回调函数
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 请求成功完成，且服务器返回状态码 200
      console.log("Server Response:", this.responseText);
      // 在此处处理服务器的响应，例如更新UI、显示成功消息等
      // var responseData = JSON.parse(this.responseText);
      // alert("数据发送成功！");
    } else if (this.readyState == 4 && this.status !== 200) {
      // 请求完成但状态码非 200，表示服务器端处理失败或错误
      console.error("Error sending data. Status:", this.status);
      // alert("数据发送失败，请重试。");
    }
  };

  // 2. 配置请求：方法、URL、是否异步
  // 请将 "/process_selection" 替换为您的实际后端 API 路径
  xhttp.open("POST", "/process_selection", true);

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

  // 4. 发送请求体数据
  // 数据格式为键值对字符串，例如 "id=someValue"
  xhttp.send("id=" + encodeURIComponent(id)); // 使用 encodeURIComponent 确保数据安全编码
}

package main

import (
    "fmt"
    "log"
    "net/http"

    "github.com/julienschmidt/httprouter" // 引入 httprouter
)

// 模拟控制器中的处理函数
func processSelectionHandler(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() 必须在访问 r.FormValue 或 r.PostForm 之前调用
    err := r.ParseForm()
    if err != nil {
        http.Error(w, "Failed to parse form data", http.StatusBadRequest)
        log.Printf("Error parsing form: %v", err)
        return
    }

    // 获取前端发送的 'id' 参数
    selectedID := r.FormValue("id")
    if selectedID == "" {
        http.Error(w, "Missing 'id' parameter", http.StatusBadRequest)
        return
    }

    // 打印接收到的数据
    fmt.Printf("Received selected ID from client: %s\n", selectedID)

    // 在此处根据 selectedID 执行您的业务逻辑，例如：
    // - 从数据库删除服务
    // - 更新某个状态
    // - 返回查询结果等

    // 模拟处理成功并返回响应
    w.Header().Set("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    fmt.Fprintf(w, `{"status": "success", "message": "ID %s processed successfully"}`, selectedID)
}

// routes 函数定义路由
func routes(r *httprouter.Router) {
    r.ServeFiles("/public/*filepath", http.Dir("public"))
    r.GET("/", func(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
        // 渲染包含下拉列表的页面
        // 例如：tmpl.ExecuteTemplate(w, "index.html", data)
        fmt.Fprint(w, "Hello, this is the start page. Go to /public/index.html to see dropdown example.")
    })
    // 定义处理 AJAX POST 请求的路由
    r.POST("/process_selection", processSelectionHandler)
    // 其他路由...
    r.GET("/auth", func(w http.ResponseWriter, r *http.Request, _ httprouter.Params) { /* ... */ })
    r.POST("/login", func(w http.ResponseWriter, r *http.Request, _ httprouter.Params) { /* ... */ })
    r.POST("/add_uslugu", func(w http.ResponseWriter, r *http.Request, _ httprouter.Params) { /* ... */ })
}

func main() {
    r := httprouter.New()
    routes(r)

    fmt.Println("Server listening on :4444")
    err := http.ListenAndServe("localhost:4444", r)
    if err != nil {
        log.Fatal(err)
    }
}