如何在前端使用 POST 将信息发送到使用 Gin and Go 的后端

如何解决如何在前端使用 POST 将信息发送到使用 Gin and Go 的后端

我通常在表单中发送数据，从来没有出现任何问题，但现在我需要用 JavaScript 发送数据，我无法在后端读取。

我的 main.go 文件：

package main

import (
    "encoding/json"
    "fmt"
    "net/http"

    "github.com/gin-gonic/gin"
)

func main() {
    // We create the instance for Gin
    r := gin.Default()

    // Path to the static files. /static is rendered in the HTML and /media is the link to the path to the  images,svg,css.. the static files
    r.StaticFS("/static",http.Dir("../media"))

    // Path to the HTML templates. * is a wildcard
    r.LoadHTMLGlob("*.html")

    r.NoRoute(renderHome)
    // This get executed when the users gets into our website in the home domain ("/")
    r.GET("/",renderHome)
    r.POST("/",getData)
    r.Run(":8080")
}

func renderHome(c *gin.Context) {
    c.HTML(http.StatusOK,"my-html.html",gin.H{})
}

func getData(c *gin.Context) {
    formData := &struct {
        Name string `json:"mydata"  binding:"required" `
    }{}
    // Validation (with Gin)
    if err := c.Bind(formData); err != nil {
        c.JSON(http.StatusBadRequest,gin.H{"error": err.Error()})
        fmt.Print(err)
        return
    }
    fmt.Println("formData: ",formData.Name)

    dec := json.NewDecoder(c.Request.Body)
    fmt.Println("Decooder: ",dec)

    dec.Decode(formData)
    fmt.Println("formData: ",formData.Name)

    p := c.PostForm("mydata")
    fmt.Println("Params: ",p)
    p = c.Params.ByName("mydata")
    fmt.Println("Params: ",p)
    p,_ = c.Params.Get("mydata")
    fmt.Println("Get: ",p)

    fmt.Println("Body: ",c.Request.Body)
}

我的 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>Document</title>
  </head>
  <body onload="afterLoad()" style="background-color: pink">
    <script>
      async function postData(url = "",data = {}) {
        // Opciones por defecto estan marcadas con un *
        const response = await fetch(url,{
          method: "POST",mode: "cors",cache: "no-cache",credentials: "same-origin",headers: {
            // "Content-Type": "application/json","Content-Type": "application/x-www-form-urlencoded",},redirect: "follow",referrerPolicy: "no-referrer",body: JSON.stringify(data),});
        return response.json(); // parses JSON response into native JavaScript objects
      }

      function afterLoad() {
        postData("/",{ mydata: 42 }).then((data) => {
          console.log(data); // JSON data parsed by `data.json()` call
        });
      }
    </script>
  </body>
</html>

我尝试将标头从 application/json 交换为 application/x-www-form-urlencoded，但没有成功。在浏览器中重新加载页面（以及执行来自 JavaScript 的方法 afterLoad()）后，我在控制台中得到的答案是：

formData:  
Decooder:  &{0xc0002b7580 [] {[] 0 0 {<nil> false [] <nil> 0} {<nil> []} <nil> false false} 0 0 {<nil> false [] <nil> 0} <nil> 0 []}
formData:  
Params:  
Params:  
Get:

此数据是从 getData() 文件中的 main.go func 打印的。无法获取数据是我做错了什么？

解决方法

我看到两个问题。首先，formData 是一个指向 struct 的指针，当您使用 decode 时，您会获得某个已经是地址的地址。其次，你的结构体没有带有 mydata 的 json 标签，只有一个表单标签，这对于 json.Decode 将 json 属性映射到 struct 属性是不够的。将 form 标签更改为 json 标签

如何在前端使用 POST 将信息发送到使用 Gin and Go 的后端

如何解决如何在前端使用 POST 将信息发送到使用 Gin and Go 的后端

解决方法

相关推荐