例如，考虑以下一个简单的登录表单：

<div>
     <form action="/test">
          <input type="text" name="login-username" id="login-username" placeholder="Username" />
          <input type="password" name="login-password" id="login-password" placeholder="Password" />
          <input type="submit" name="login-submit-button" id="login-submit-button" value="Submit" />
     </form>
</div>

当用户填写并提交这个表单后，即使输入字段为空，URL也会变成类似 http://localhost:3000/test?login-username=&login-password=&login-submit-button=Submit 的形式。这种行为在某些场景下可能不是我们期望的，特别是当我们需要保持URL的简洁性，或者不希望敏感信息（即使是空值）在URL中暴露时。

解决方案：使用POST方法提交表单

要解决表单数据在URL中暴露的问题，最直接且标准的做法是将表单的提交方法从默认的 GET 更改为 POST。POST 方法的主要特点是它将表单数据封装在HTTP请求的请求体（request body）中发送，而不是附加到URL上。

只需在

AI智能阅读辅助工具

<div>
     <form action="/test" method="POST">
          <input type="text" name="login-username" id="login-username" placeholder="Username" />
          <input type="password" name="login-password" id="login-password" placeholder="Password" />
          <input type="submit" name="login-submit-button" id="login-submit-button" value="Submit" />
     </form>
</div>

通过上述修改，当用户提交表单后，即使表单数据被发送到 /test 路径，浏览器的URL地址栏仍将保持为 http://localhost:3000/test，从而实现了URL的整洁。

GET与POST方法的选择与注意事项

虽然 POST 方法能有效解决URL参数暴露的问题，但在实际开发中，选择 GET 还是 POST 并非随意，而是基于其语义和使用场景。

• GET方法：
  • 用于从服务器获取资源。
  • 请求参数通过URL传递，因此可以被缓存、收藏、保留在浏览器历史记录中。
  • 对服务器数据不应产生副作用（幂等性）。
  • URL长度通常有限制。
• POST方法：
  • 用于向服务器提交数据，通常会改变服务器状态或创建新资源。
  • 请求参数通过请求体传递，因此不会出现在URL中。
  • 不应被缓存、收藏，也不会保留在浏览器历史记录中（通常）。
  • 对数据量没有理论上的限制。
  • 更适合提交敏感信息（如密码），因为它不会在URL中明文显示，尽管这并不意味着数据是加密的，仍需HTTPS保护。

在React或J*aScript环境中，除了传统的HTML表单提交，开发者也常通过J*aScript来拦截表单的默认提交行为（使用 event.preventDefault()），然后使用 fetch API 或 axios 等库发送异步 POST 请求。这种方式同样能保持URL的整洁，并且提供了更灵活的数据处理和用户体验。然而，对于不涉及异步请求的简单重定向表单，直接设置 method="POST" 是最简洁有效的方案。

总结

要确保HTML表单提交后URL保持整洁，避免表单字段作为查询参数出现，核心在于明确指定表单的提交方法为 POST。这不仅是Web开发的标准实践，也有助于提升用户体验和在一定程度上保护数据的隐私性（不暴露在URL中）。理解 GET 和 POST 方法的语义差异，将帮助开发者在不同场景下做出正确的选择。