如何将下拉列表选中的数据发送至Go后端服务器？

我正在用Go开发一个Web应用，通过模板生成了下拉列表，业务逻辑是用户选择列表项后，要把选中值发送到服务器执行后续操作。目前已经能把选中项输出到浏览器控制台，但不清楚怎么把数据发送到服务器。

现有前端代码（下拉列表模板） #

<div class="dropdown">
    <button onclick="myFunction()" class="dropbtn"> Удалить услугу</button>
    <ul id="myDropdown" class="dropdown-content">
      {{range .}}
      <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");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
</script>

已实现的选中项监听代码 #

var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
  var targetEl = event.target;
  console.log(targetEl.innerHTML);
});

现有后端代码 #

func main() {
    r := httprouter.New()
    routes(r)
    err := http.ListenAndServe("localhost:4444", r)
    if err != nil {
        log.Fatal(err)
    }
}

func routes(r *httprouter.Router) {
    r.ServeFiles("/public/*filepath", http.Dir("public"))
    r.GET("/", controller.StartPage)
    r.GET("/auth", controller.LoginPage)
    r.POST("/login", controller.Log_in)
    r.POST("/add_uslugu", controller.Add_from_html)
}

解决方案 #

第一步：后端添加接收删除请求的路由和处理函数 #

1. 在routes函数中新增POST路由，用于接收删除请求：

func routes(r *httprouter.Router) {
    // 保留原有路由
    r.POST("/delete_uslugu", controller.DeleteUslugu)
}

2. 在controller包中实现DeleteUslugu处理函数，解析请求中的ID并执行删除逻辑：

package controller

import (
    "encoding/json"
    "log"
    "net/http"
    "github.com/julienschmidt/httprouter"
)

// 定义接收请求的结构体
type DeleteRequest struct {
    ID string `json:"id"`
}

func DeleteUslugu(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
    // 设置响应头为JSON格式
    w.Header().Set("Content-Type", "application/json")

    // 解析请求体中的JSON数据
    var req DeleteRequest
    err := json.NewDecoder(r.Body).Decode(&req)
    if err != nil {
        http.Error(w, "无效的请求体", http.StatusBadRequest)
        return
    }

    // 这里替换为实际的删除逻辑，比如根据req.ID删除对应服务
    log.Printf("收到服务删除请求，ID: %s", req.ID)

    // 返回成功响应
    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode(map[string]string{"status": "success", "message": "服务已删除"})
}

第二步：修改前端代码发送请求到服务器 #

更新点击监听代码，用fetch API把选中的ID以JSON格式发送到后端：

var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
  var targetEl = event.target;
  var serviceId = targetEl.innerHTML;

  // 发送POST请求到后端
  fetch('/delete_uslugu', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ id: serviceId }),
  })
  .then(response => response.json())
  .then(data => {
    console.log('请求成功:', data);
    // 可在此添加成功后的操作，比如移除选中的列表项
    targetEl.remove();
  })
  .catch((error) => {
    console.error('请求失败:', error);
  });
});

可选优化：用DELETE请求符合REST规范 #

如果遵循REST风格，可改用DELETE请求，后端通过路由参数获取ID：

后端路由修改：

r.DELETE("/delete_uslugu/:id", controller.DeleteUslugu)

处理函数修改：

func DeleteUslugu(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
    w.Header().Set("Content-Type", "application/json")
    serviceId := ps.ByName("id")

    log.Printf("收到服务删除请求，ID: %s", serviceId)

    // 执行实际删除逻辑...

    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode(map[string]string{"status": "success", "message": "服务已删除"})
}

前端请求修改：

fetch(`/delete_uslugu/${serviceId}`, {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json',
  },
})
.then(response => response.json())
.then(data => {
  console.log('请求成功:', data);
  targetEl.remove();
})
.catch((error) => {
  console.error('请求失败:', error);
});

内容的提问来源于stack exchange，提问作者vasper