【发布时间】:2021-07-17 08:55:53
【问题描述】:
原谅我,但我不太懂英语。我使用翻译器 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
2 - 但是,如果您使用脚本 main2.js,它会在页面加载时立即运行,那么一切似乎都正常。数据已发送,服务器对其进行处理并将其返回给我。 虽然,由于某种原因在文件 search.go 中输出 fmt.Println("body:", err) - "nil",但在变量“body”中是根据文档解码查询正文(application/json)。
请帮我解决问题。我花了 2 天时间在 google、yandex、youtube 上寻找我的问题的解决方案,但我找不到我的问题的解决方案。
我会提前感谢您的回答!
【问题讨论】:
标签: javascript json go post fibers