深入理解表单---提交用户与网页交互的重要方式：GET 与 POST 的本质区别与应用实践

在 Web 开发中，表单（<form>）是用户与网页交互的重要方式，而表单的 method 属性则决定了数据是如何发送到服务器的。本文将带你系统理解 GET 和 POST 请求方式的区别、使用场景与注意事项，并结合示例进行实战分析。

一、GET 与 POST 的区别详解

对比项	GET	POST
数据位置	附加在 URL 后（如 `?name=Tom&age=20`）	放在请求体中，URL 不显示
可见性	用户可见，地址栏会显示提交内容	用户不可见，地址栏不会变化
参数长度	有限制（受浏览器/服务器限制）	理论无限制（实际应合理控制）
安全性	不安全，容易被截获和记录	相对安全，适合传递敏感信息
缓存	可被浏览器缓存	不会被缓存
适合用途	查询操作（搜索、筛选）	数据提交（注册、登录、上传）

1.在method=Get下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
    <form action="ok.html" method="get">
    <h1 align="center">用户注册信息</h1>
     <table>
        <tr>
            <td>用户名称：</td>>
            <td><input type="text" name="username"></td>>
        </tr>

        <tr>
            <td>用户密码：</td>>
            <td><input type="password" name="password"></td>>
        </tr>
            <td>确认密码：</td>>
            <td><input type="password" name="password1"></td>>
        <tr>
            <td> 选择你喜欢的项目：</td>
            <td> <input type="checkbox" name="sport" value="basketball">篮球 <input type="checkbox" name="sport" value="football" checked>足球 <input type="checkbox" name="sport" value="tenisball" checked>羽毛球
             <input type="checkbox" name="sport" value="handball">手球</td>
        </tr>>

        <tr>
            <td> 请选择性别：</td>>
            <td> <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女 </td>
        </tr>>

        <tr>
            <td>  请选择城市：</td>>
            <td> <select name="city">
                <option >选择</option>
                <option value="chengdu" >成都</option>
                <option value="shannghai" >上海</option>
                <option value="nanjin" >南京</option>
                <option value="guangzhou" >广州</option>
            </select><br/> </td>
        </tr>>

        <tr>
            <td> 自我介绍：</td>>
            <td> <textarea rows="10" cols="10"></textarea> </td>
        </tr>>

        <tr>
            <td> 选择你的文件头像:</td>>
            <td><input type="file" name="myprofile"> </td>
        </tr>>

        <tr>
            <td> <input type="submit" value="提交"/><input type="reset" value="重置"/> </td>
        </tr>>

        </table>
    </form>
</body>
</html>

细节解读，浏览器解析：

如下，所有数据以键值对形式拼接在 URL 后，一目了然 ，但也容易泄露信息：

html 复制代码

http://localhost:63342/javaweb01/src/web/ok.html?username=sdsd&password=sas&password1=ad&sport=basketball&gender=female&city=chengdu&myprofile=Uformer-main.zip

进一步我们打开浏览器开发者模式，这里已edge浏览器为例：

找到对应的包，详情如下：

这里看不懂记得打开原始编码，这里是浏览器为了给我们更容易读的数据包格式：

这是一个HTTP GET请求的详细记录，我来解读关键信息：

请求基本信息

请求URL: http://localhost:63342/javaweb01/src/web/ok.html?username=sdsd&password=sas&password1=ad&sport=basketball&gender=female&city=chengdu&myprofile=Uformer-main.zip

响应信息

安全注意

这是一个典型的开发环境中的表单提交请求，但展示了实际开发中需要改进的安全实践。

查看负载数据包

这就是我们上传表单的真正的数据包。

在这里可以直接看出get方法的弊端就是敏感信息明文传输 password 和 password1 直接暴露在 URL 中，这极不安全，容易被拦截或记录。

2.在method=Post下

可以看到POST 是封闭的、相对安全的 。

本地开发服务器(localhost)上的JavaWeb项目
- 通过查询字符串传递了表单数据：
  - username=sdsd
  - password=sas
  - sport=basketball
  - gender=female
  - city=chengdu
  - 上传文件：Uformer-main.zip
请求方法: GET
状态代码: 200 OK (请求成功)
请求头信息
用户代理: Microsoft Edge浏览器(基于Chromium 135)
来源页面(referer): form-all.html表单页
安全相关头部:
- X-Frame-Options, X-XSS-Protection等显示有基本安全配置
开发环境:
- 服务器: IntelliJ IDEA内置服务器(2024.3.2.2版本)
- 包含IDE的cookie标识
内容类型: text/html
敏感信息明文传输:
- 密码(password/sas)通过URL明文传输，这是严重的安全隐患
- 应该使用POST方法并通过HTTPS加密传输
文件上传:
- 文件名通过URL暴露，可能需要注意路径安全问题
开发环境特征:
- IntelliJ IDEA服务器头部信息暴露了开发环境细节
无缓存设置(no-cache)
最后修改时间: 前一天
内容长度: 174字节(很小的HTML响应)

总结

GET 与 POST 是 Web 表单中两种最基础但非常重要的请求方式。掌握它们的本质差异与使用场景，是每个前端和后端开发者的必修课。