【基于GO的Web开发10】gin获取HTML-Form表单提交参数

一、基础原理理解

1. 浏览器访问 GET /login，后端返回登录页面 login.html，一次请求对应一次响应。
2. 在表单填入账号密码，点击登录按钮，浏览器发起第二次请求。
3. form 表单属性说明
   • action="/login"：表单提交后请求的后端接口地址
   • method="post"：提交请求方式为 POST
4. ⚠️大坑：表单用 POST 提交，如果后端只写了r.GET("/login")没有写 POST 路由，访问直接404。
5. 表单提交按钮：<input type="button"> 只是普通按钮，不会自动提交表单 ，必须改为 <input type="submit">

前端页面上请求发到哪里，完全由 form 标签的action属性决定。

二、初始错误版代码（踩坑示例）

main.go

package main

import(
	"github.com/gin-gonic/gin"
	"net/http"
)

//获取form表单提交的参数
func main() {
	r := gin.Default()
	r.LoadHTMLFiles("./login.html")
	r.GET("/login", func(c *gin.Context) {
		c.HTML(http.StatusOK, "login.html", nil)
	})

	r.Run(":9090")
}

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <form action="/login" method="post">
        <label for="username">username:</label>
        <input type="text" name="username" id="username">

        <label for="password">password:</label>
        <input type="password" name="password" id="password">

        <!-- type="button" 无法提交表单，bug点 -->
        <input type="button" value="登录">
    </form>
</body>
</html>

问题：缺少 POST 路由；按钮不能提交表单，点击登录无任何反应。

三、Gin 接收 Form 表单参数的 3 种方法

前提：添加 POST 路由 r.POST("/login", 回调函数)

方法 1：c.PostForm ()

功能：获取表单参数；取不到参数返回空字符串 ""

r.POST("/login", func(c *gin.Context) {
	// 获取表单里的用户名和密码
	username := c.PostForm("username")
	password := c.PostForm("password")

	c.String(http.StatusOK, "提交成功！username=%s, password=%s", username, password)
})

方法 2：c.DefaultPostForm ()

功能：获取表单参数；取不到参数，返回我们设置好的默认值

r.POST("/login", func(c *gin.Context) {
	username := c.DefaultPostForm("username", "somebody")
	password := c.DefaultPostForm("password", "***")
	
	println("用户名：", username)
	println("密码：", password)

	c.String(http.StatusOK, "提交成功！username=%s, password=%s", username, password)
})

方法 3：c.GetPostForm ()（推荐，可判断参数是否存在）

返回两个值：(参数值，是否成功获取到参数 bool) 可以区分：用户没传参数 / 用户传了空字符串

r.POST("/login", func(c *gin.Context) {
	username, ok := c.GetPostForm("username")
	if !ok {
		username = "sb"
	}
	password, ok := c.GetPostForm("password")
	if !ok {
		password = "***"
	}
	c.String(http.StatusOK, "提交成功！username=%s, password=%s", username, password)
})

四、完整可运行正确代码

package main

import (
	"fmt"
	"net/http"
	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()
	r.LoadHTMLFiles("./login.html")

	// GET路由：展示登录页面
	r.GET("/login", func(c *gin.Context) {
		c.HTML(http.StatusOK, "login.html", nil)
	})

	// POST路由：接收表单提交的数据
	r.POST("/login", func(c *gin.Context) {
		username := c.PostForm("username")
		password := c.PostForm("password")
		fmt.Println("用户名:", username, "密码:", password)
		c.String(http.StatusOK, "提交成功！username=%s, password=%s", username, password)
	})

	r.Run(":9090")
}

五、三个 API 对比总结表

表格

方法	返回值	获取不到参数的结果	使用场景
c.PostForm("key")	value	返回空字符串 ""	参数必填，不需要默认值
c.DefaultPostForm ("key","默认值")	value	返回设置的默认值	可选参数，兜底填充默认值
c.GetPostForm("key")	(value,ok)	ok=false	需要校验参数是否传递，推荐用于登录校验

六、复习易错点清单

1. GET 路由只负责展示页面，POST 路由负责接收表单提交数据，两条路由相互独立。
2. form 标签 method="post"，后端必须使用 r.POST()，不能用 GET，否则 404。
3. input 标签必须带name="xxx"属性！后端获取参数靠 name，不是 id。
4. 提交按钮必须写 type="submit"，普通 button 不会触发表单提交。
5. 一次请求对应一次响应；不同请求方式（GET/POST）属于完全不同的请求。