go语言form表单提交以及后台如何接收并返回做一个简单的解释

我们大部分情况下都离不开form表单的提交,今天就来介绍一下form表单的提交,以及后台的返回
先给大家看效果
这里写图片描述
点击登录以后出现的效果
这里写图片描述
这是本地测试的效果
接下来就上代码了
前端代码

<html>
<head><title></title></head>
<body>
    <form action="http://localhost:9090/" method="post">
        用户名:<input type="text" name="username">
        密  码:<input type="text" name="password">
        <input type="submit" value="登录">
    </form>
</body>
</html>

后端代码

package main
import (
    "fmt"
    "html/template"
    "log"
    "net/http"
    "strings"
)
func sayHelloName(w http.ResponseWriter, r *http.Request) {
    // 解析url传递的参数
    r.ParseForm()
    for k, v := range r.Form {
        fmt.Println("key:", k)
        // join() 方法用于把数组中的所有元素放入一个字符串。
        // 元素是通过指定的分隔符进行分隔的
        fmt.Println("val:", strings.Join(v, ""))
    }
    // 输出到客户端
    name :=r.Form["username"]
    pass :=r.Form["password"]
    for i,v :=range name{
        fmt.Println(i)
        fmt.Fprintf(w,"用户名:%v\n",v)
    }
    for k,n :=range pass{
        fmt.Println(k)
        fmt.Fprintf(w,"密码:%v\n",n)
    }
}
func login(w http.ResponseWriter, r *http.Request) {
    fmt.Println("method:", r.Method)
    if r.Method == "GET" {
        t, _ := template.ParseFiles("login.html")
        // func (t *Template) Execute(wr io.Writer, data interface{}) error {
        t.Execute(w, nil)
    } else {
        r.ParseForm()
        fmt.Println("username:", r.Form["username"])
        fmt.Println("password:", r.Form["password"])
    }
}
func main() {
    http.HandleFunc("/", sayHelloName)
    http.HandleFunc("/login", login)
    err := http.ListenAndServe(":9090", nil)
    if err != nil {
        log.Fatal("ListenAndserve:", err)
    }
}

好了,这个只是简单的form表单的提交和返回,下一篇会讲到如何将form表单提交的数据和数据库进行匹配,来达到登录或注册的目的,好了,就到这里了,如果有什么疑问可以在下方评论或留言!

好的,这是一个关于前后端交互的问题。我可以给你一些解释和代码示例。 首先,前端需要有一个表单来输入数据,并通过onsubmit事件触发提交操作。例如: ```html <form onsubmit="submitData(event)"> <input type="text" id="inputData"> <button type="submit">提交</button> </form> ``` 这里定义了一个文本框和一个按钮,当按钮被点击时会触发submitData函数提交数据。 接下来是submitData函数的代码示例: ```javascript function submitData(event) { event.preventDefault(); // 阻止表单默认提交行为 const inputData = document.getElementById('inputData').value; // 获取文本框中的数据 // 发送POST请求给后台 fetch('/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data: inputData }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); } ``` 这里使用了fetch函数向后台发送了一个POST请求,并将输入的数据打包成JSON格式的数据放在请求体中。请求头中指定了Content-Type为application/json,表示发送的是JSON数据。 在后台,可以使用Gin框架来获取这个请求。示例代码如下: ```go func main() { r := gin.Default() // POST请求处理函数 r.POST("/submit", func(c *gin.Context) { var requestData struct { Data string `json:"data"` } // 解析请求体中的JSON数据 if err := c.BindJSON(&requestData); err != nil { c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } // 输出获取到的数据 fmt.Println(requestData.Data) c.JSON(http.StatusOK, gin.H{"message": "数据提交成功"}) }) r.Run() // 启动服务 } ``` 这里定义了一个POST请求处理函数,使用BindJSON方法从请求体中解析JSON数据,并输出到控制台上。最后返回一个JSON格式的响应数据表示提交成功。 希望这些代码示例对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值