使用AJAX与Go语言实现下拉列表数据到服务器的传输

// 获取所有下拉列表中的<li>元素
var listItems = document.querySelectorAll('ul > li');

// 为每个<li>元素添加点击事件监听器
for (let li of listItems) {
    li.addEventListener('click', function (event) {
        // 获取被点击<li>元素的文本内容，作为需要发送的ID
        let id = li.innerText;

        // 接下来将使用这个id发送AJAX请求
        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');
            }
        }
    }
}

/**
 * 发送数据到服务器的函数
 * @param {string} dataToSend 需要发送的数据（此处为选中的ID）
 */
function sendDataToServer(dataToSend) {
    var xhttp = new XMLHttpRequest();

    // 监听请求状态变化
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // 请求成功并收到响应
            console.log("服务器响应:", this.responseText);
            // 在此处处理服务器返回的数据，例如更新UI
            // Do something with this.responseText;
        } else if (this.readyState == 4 && this.status != 200) {
            // 请求完成但状态码非200，表示请求失败
            console.error("请求失败，状态码:", this.status);
            // 处理错误情况
        }
    };

    // 配置请求：POST方法，目标URL，异步请求
    // 注意："<your_server_endpoint>" 需替换为实际的后端API路径
    xhttp.open("POST", "/delete_service", true); 

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

    // 发送数据，格式为 "参数名=参数值"
    xhttp.send("id=" + dataToSend);
}

package main

import (
    "log"
    "net/http"

    "github.com/julienschmidt/httprouter" // 假设您使用httprouter
    // "your_project/controller" // 假设您的处理函数在controller包中
)

// main函数示例
func main() {
    r := httprouter.New()
    routes(r) // 调用routes函数配置所有路由

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

// routes函数配置所有路由
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)

    // 添加处理下拉列表数据的新路由
    // 假设controller包中有一个名为HandleDeleteService的函数
    r.POST("/delete_service", controller.HandleDeleteService) 
}

package controller

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

    "github.com/julienschmidt/httprouter"
)

// HandleDeleteService 处理来自前端的删除服务请求
func HandleDeleteService(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
    // 确保请求方法是POST
    if r.Method != http.MethodPost {
        http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
        return
    }

    // 解析表单数据。对于application/x-www-form-urlencoded，r.FormValue("key")可以直接获取值。
    // 如果是multipart/form-data，需要先调用r.ParseMultipartForm()
    id := r.FormValue("id") 

    // 验证id是否存在
    if id == "" {
        http.Error(w, "ID parameter missing", http.StatusBadRequest)
        return
    }

    // 在此处执行业务逻辑，例如从数据库中删除服务
    log.Printf("Received request to delete service with ID: %s", id)
    // 示例：模拟删除操作
    // err := yourService.DeleteService(id)
    // if err != nil {
    //     http.Error(w, "Failed to delete service", http.StatusInternalServerError)
    //     return
    // }

    // 返回成功响应给客户端
    w.WriteHeader(http.StatusOK)
    fmt.Fprintf(w, "Service with ID %s deleted successfully.", id)
}