Fiber web 框架无法发送 ajax 请求

Question

请原谅，我的英语不太好。我使用翻译器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 上寻找问题的解决方案，但我找不到问题的解决方案。

我将提前感谢您的回答！

Answer 1

您看到的问题与 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 ... */

Fiber web 框架无法发送 ajax 请求

Fiber web framework can not send ajax request

javascript

post

json

go

fibers