如何解决 Ajax 请求无法发送到 Go Web 服务器的问题_技术教程

本文详解 ajax 请求未到达 go 后端的两大核心原因：静态资源（如 js 文件）未正确托管，以及表单默认提交行为干扰了异步请求；并提供完整可运行的修复方案。

在初学 Go Web 开发与前端交互时，一个常见陷阱是：Ajax 请求看似发起却未触发后端处理逻辑（例如日志中不打印 "in posthandler"）。从你提供的代码来看，问题并非出在 Ajax 本身逻辑错误，而是两个关键基础设施缺失：

1. 静态资源未被服务器托管

你的 index.html 引用了，但 Go 的 http.ServeMux 默认不会自动提供静态文件。当浏览器尝试加载 /js/getData.js 时，会返回 404，导致 loadXMLDoc() 函数根本未定义，点击按钮后 JavaScript 报错（可在浏览器开发者工具 Console 中验证），后续 Ajax 请求自然不会执行。

✅ 解决方案：为 JS 文件显式注册路由处理器。如修复代码所示，使用 serveSingle("/js/getData.js", "./js/getData.js") 将路径映射到本地文件系统，确保脚本成功加载。

2. 表单默认提交行为覆盖了 Ajax

HTML 中点击时会自动提交整个表单（向 /post 发起同步 POST 请求），这会导致页面跳转或刷新，中断 JavaScript 执行流——即使 onclick="loadXMLDoc()" 被调用，也可能因页面卸载而失效。

✅ 解决方案：将按钮类型改为 type="button"（非 submit），彻底禁用表单默认提交；同时建议在 loadXMLDoc() 中主动阻止事件冒泡（虽非必需，但更健壮）：

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4) {
            if (xmlhttp.status === 200) {
                document.getElementById("fromserver").innerHTML = xmlhttp.responseText;
            } else {
                console.error("Request failed:", xmlhttp.status, xmlhttp.statusText);
            }
        }
    };
    // 注意：URL 应为 "/post"（与 Go 路由一致），而非 "post"
    xmlhttp.open("POST", "/post", true);
    // ⚠️ 关键：设置 Content-Type 并发送表单数据
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var textfieldValue = document.getElementById("textfield").value;
    xmlhttp.send("textfield=" + encodeURIComponent(textfieldValue));
}

? 补充说明：原 JS 中 xmlhttp.open("POST","post",true) 的路径 "post" 是相对路径，实际请求的是当前页同级的 post（如 http://localhost:8888/post），虽能匹配 Go 路由，但缺少数据发送逻辑——xmlhttp.send() 未传参，导致后端 r.FormValue("textfield") 始终为空。