Web 开发中保持表单提交 URL 清洁的实践指南

这意味着表单中的所有输入字段的 name 属性及其对应的值，会被编码成键值对的形式，并作为查询字符串附加到 action 属性指定的 URL 后面。

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

<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>

当用户填写表单并点击提交按钮后，如果 action 属性指向 /test，那么浏览器会将用户重定向到类似于以下结构的 URL：

http://localhost:3000/test?login-username=your_username&login-password=your_password&login-submit-button=Submit

可以看到，表单的所有数据都清晰地显示在 URL 中，这不仅影响了 URL 的美观性，对于包含敏感信息（如密码）的表单来说，更是一个潜在的安全隐患。

解决方案：使用 POST 方法保持 URL 简洁

要解决表单数据出现在 URL 中的问题，最直接且标准的方法是明确将表单的提交方法设置为 POST。

POST 方法与 GET 方法的主要区别在于数据传输的方式。当使用 POST 方法时，表单数据不会作为 URL 的查询参数发送，而是被封装在 HTTP 请求的请求体（Request Body）中发送到服务器。这样，无论表单包含多少字段或字段值有多长，URL 都能保持其简洁性。

要实现这一点，只需在

VALL-E

VALL-E是一种用于文本到语音生成 (TTS) 的语言建模方法

142

查看详情

<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>

通过这一简单的改动，当用户提交表单后，URL 将保持为 http://localhost:3000/test，而表单数据则安全地在后台通过请求体传输给服务器。

GET 与 POST 方法的对比与选择

理解 GET 和 POST 方法的差异对于 Web 开发至关重要，它们各自适用于不同的场景。

GET 方法特点

• 数据可见性： 数据通过 URL 查询字符串发送，对用户可见。
• 数据量限制： 大多数浏览器和服务器对 URL 长度有限制，不适合传输大量数据。
• 安全性： 不适合传输敏感数据，因为它会暴露在 URL、浏览器历史记录和服务器日志中。
• 缓存： GET 请求可以被浏览器缓存。
• 书签： 可以被收藏为书签，方便重复访问。
• 幂等性： 重复执行 GET 请求不会对服务器状态产生副作用（例如，多次获取同一篇文章不会改变文章内容）。
• 适用场景： 主要用于从服务器获取数据，如搜索、查询、获取页面内容等。

POST 方法特点

• 数据可见性： 数据通过请求体发送，不会显示在 URL 中。
• 数据量限制： 没有严格的数据量限制，适合传输大量数据或文件上传。
• 安全性： 相对 GET 更安全，因为数据不直接暴露在 URL 中，但仍需结合 HTTPS 进行加密传输以确保端到端安全。
• 缓存： POST 请求默认不被缓存。
• 书签： 不能直接收藏为书签。
• 幂等性： 重复执行 POST 请求可能会对服务器状态产生副作用（例如，多次提交订单可能会创建多个订单）。
• 适用场景： 主要用于向服务器提交数据、创建、更新或删除资源，如登录、注册、发布文章、提交表单等。

总结选择原则：

• 当操作是获取数据且不改变服务器状态时，使用 GET。
• 当操作是提交数据、改变服务器状态（创建、修改、删除）或涉及敏感信息时，使用 POST。

进阶考量与最佳实践

在现代 Web 开发中，尤其是在使用 React 等前端框架时，表单处理通常会更加复杂，并引入一些进阶实践：

1. 使用 JavaScript 阻止默认提交： 对于单页应用（SPA），我们通常不希望表单导致页面刷新。在这种情况下，会使用 JavaScript 的 event.preventDefault() 方法来阻止表单的默认 GET 或 POST 提交行为。

   // 示例：在 React 或原生 JS 中处理表单提交
   const handleSubmit = (event) => {
       event.preventDefault(); // 阻止浏览器默认的表单提交行为
       const formData = new FormData(event.target);
       // 使用 fetch API 或 Axios 等库异步发送数据
       fetch('/test', {
           method: 'POST', // 明确指定为 POST
           body: formData, // 数据在请求体中
       })
       .then(response => response.json())
       .then(data => {
           console.log('Success:', data);
           // 处理服务器响应，可能进行页面导航或状态更新
           // 例如：history.push('/dashboard');
       })
       .catch(error => {
           console.error('Error:', error);
       });
   };
   
   // 在 HTML/JSX 中：
   // <form onSubmit={handleSubmit}>...</form>

   登录后复制

   这种异步提交（AJAX）方式是现代 Web 应用的主流，它天然地避免了 URL 中出现表单数据的问题，因为页面不会刷新或重定向，除非您在 JavaScript 代码中显式地进行 URL 导航。

2. 安全性： 即使使用 POST 方法将数据隐藏在请求体中，如果传输通道不安全（即使用 HTTP 而非 HTTPS），数据在传输过程中仍然可能被截获。因此，对于所有涉及用户数据交换的表单，务必使用 HTTPS 来加密通信，确保数据在客户端和服务器之间的传输是安全的。

3. 用户体验： 简洁的 URL 不仅美观，也更容易被用户理解和记忆。避免在 URL 中暴露冗余信息有助于提升整体的用户体验。

总结

在 Web 开发中，保持 URL 的清洁和简洁是良好实践的一部分。通过理解 HTML 表单的默认 GET 提交行为会导致数据附加到 URL，我们可以通过简单地将表单的 method 属性设置为 post 来有效解决这一问题。

对于更复杂的应用场景，结合 JavaScript 阻止默认提交并使用异步请求（如 fetch API）是更推荐的方法。无论采用哪种方式，选择正确的 HTTP 方法，并始终结合 HTTPS 来确保数据传输安全，是构建健壮和用户友好型 Web 应用的关键。