Fiber web 框架无法发送ajax请求

问题描述

请原谅我，但我不太懂英语。我使用翻译器 deepl.com。在这一点上俄罗斯程序员帮不了我。我不是程序员，“我只为自己编程”。我有一个问题 - 我无法向服务器发送 POST (JSON) 请求。

我想要做什么 - Fiber 上的服务器通过 POST 请求（JSON、XMLHttpRequest）从 html 页面获取 2 个参数，并在处理后服务器给我一个字符串。我使用 Fiber 是因为我曾经为自己制作了一个小型静态网站，并且在“示例”中很清楚。我做了一个快速的 ctrl+C - ctrl+V，只是调整了我的代码。然后我调整了 html、js、css。我有一个工作网站！ :-)

main.go - 启动服务器（这里没有问题）

package main
 
import (
    "github.com/gofiber/fiber"
    "github.com/gofiber/fiber/middleware/logger"
)
 
func main() {
    app := fiber.New()
    app.Use(logger.New())
    app.Static("/",".")
 
    app.Get("/",func(c *fiber.Ctx) error {
        return c.SendFile("./main.html")
    })
 
    app.Post("/search",PostTodo)
 
    app.Listen(":3003")
 
}

search.go - 接收数据后要做什么的逻辑。（目前只是一种模板，有一点小问题，但大体有效）

package main
 
import (
    "fmt"
 
    "github.com/gofiber/fiber"
)
 
type Response_JSON struct {
    Name    string `json:"name"`
    Surname string `json:"surname"`
}
 
func PostTodo(c *fiber.Ctx) error {
    type request struct {
        Name    string `json:"name"`
        Surname string `json:"surname"`
    }
 
    var body request
 
    err := c.BodyParser(&body)
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "error": "Cannot parse JSON",})
    }
    fmt.Println("body: ",err)
 
    todo := Response_JSON{
        Name:    body.Name,Surname: body.Surname,}
 
    fmt.Println("todo: ",todo)
    my_request := "<div>" + todo.Name + "</div>"
    my_request = my_request + "<hr><div>" + todo.Surname + "</div>"
 
    return c.SendString(my_request)
}

main.html - 主页

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Proba</title>
</head>
<body>
    <div class="container">
        <div class="logo">
            <h1>Proba</h1>        
        </div>        
        <form action="/search" class="search_form" method="POST">
            <div class="search">
                <input type="text" id="search_name" value="" name="search_name" placeholder="Search name...">
                <input type="text" id="search_surname" value="" name="search_surname" placeholder="Search surname...">
                <input type="submit" id="send" class="search_button" value="Go">
            </div>              
        </form>        
        <div id="result" class="result">
        </div>         
    </div>
    <script src="main.js"></script>
</body>
</html>

main.js - 点击后的脚本处理表单（这里的主要问题）

let mybutton = document.getElementById("send");
 
mybutton.addEventListener("click",() => {
    let name = document.getElementById("search_name").value;
    let surname = document.getElementById("search_surname").value;
    let s = {};
    s.name = `${name}`;
    s.surname = `${surname}`;
    let search_json = JSON.stringify(s);
 
    console.log("s: ",s);
    console.log("name: ",name);
    console.log("surname: ",surname);
    console.log("search_json  ",search_json);    
 
    let request = new XMLHttpRequest();
    request.open('POST','/search');
    request.setRequestHeader('Content-type','application/json'); 
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200)
            document.getElementById("result").innerHTML=request.responseText;
        }
 
    request.send(search_json); 
});

main2.js - 一个无需“点击”即可工作的试用版 js（通过它我试图了解问题出在哪里）

let user = {
    name: "Ivan",surname: "Ivanov"
};
console.log("user:",user);
 
 
let json = JSON.stringify(user);
console.log("json:",json);
let request = new XMLHttpRequest();
request.open("POST","/search");
request.setRequestHeader('Content-type','application/json');
request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200)
            document.getElementById("result").innerHTML=request.responseText;
        }
request.send(json);

我所拥有的： 1 - 我启动服务器并转到 main.html。我填写数据并单击按钮（提交（Go）），我看到了这个结果。请求没有发送，而且奇怪的是行 console.log("s: ",s);没有工作（控制台中的输出没有发生）。 enter image description here

enter image description here

2 - 但是，如果您使用脚本 main2.js，它会在页面加载时立即运行，那么一切似乎都可以运行。数据已发送，服务器对其进行处理并将其返回给我。虽然由于某种原因在文件 search.go 输出 fmt.Println("body: ",err) - "nil"，但在变量 "body" 中，根据文档解码了查询正文 (application/json)。

enter image description here

请帮我解决问题。我花了 2 天时间在 google、yandex、youtube 上寻找问题的解决方案，但找不到解决问题的方法。

我会提前感谢您的回答！

解决方法

您看到的问题与 Go（甚至 Fiber）无关，这是因为您的表单正在立即发布，javascript 没有机会触发。

您需要添加 preventDefault(); 以阻止事件“冒泡”并触发表单提交。

// Bind the call to the variable 'e'
mybutton.addEventListener("click",(e) => {
   // Add this line!
   e.preventDefault();
/* ... the rest is the same ... */

fibers go javascript json post