GET与POST表单提交方式详解

HTML表单提交方式主要通过`method`属性设置，包括GET和POST两种。**GET方式**将数据附加在URL后，适用于获取数据，可被缓存和添加书签，但有长度限制且安全性较低。**POST方式**则将数据放在请求体中，适合提交敏感或大量数据，更安全且无长度限制，常用于修改服务器数据。文件上传必须使用POST并设置`enctype="multipart/form-data"`。本文详解GET与POST的区别，包括数据可见性、长度限制、安全性、用途和缓存等方面的差异，并提供JavaScript异步提交表单及Node.js Express服务器端获取GET/POST参数的方法，助你选择合适的表单提交方式。

HTML表单通过method属性选择GET或POST提交数据，GET将数据附加在URL后，适用于获取数据且可被缓存和书签保存，但有长度限制且安全性较低；POST将数据放在请求体中，适合提交敏感或大量数据，更安全且无长度限制，常用于修改服务器数据。文件上传必须使用POST并设置enctype="multipart/form-data"。JavaScript可通过FormData和fetch API实现异步提交。服务器端如Node.js Express中，GET参数通过req.query获取，POST参数需借助body-parser等中间件解析后从req.body获取。

HTML表单提交方式主要有两种：GET 和 POST。选择哪种方式取决于你想要做什么，以及你想要如何处理数据。GET 通常用于获取数据，而 POST 用于提交数据，例如创建新用户或更新现有信息。

解决方案：

HTML表单使用 method 属性来指定提交方式。

  
  <input type="text" name="username" value="默认用户名">
  提交 (GET)



  
  <input type="password" name="password">
  提交 (POST)

action 属性指定表单数据提交到的URL。method 属性可以是 "GET" 或 "POST"。

GET 和 POST 的主要区别？

• 数据可见性: GET 请求的数据会附加到 URL 上，因此是可见的，例如 /submit?username=test&password=password123。POST 请求的数据则在 HTTP 请求体中，对用户不可见。
• 数据长度限制: GET 请求有长度限制，通常取决于浏览器和服务器的配置，一般不超过 2048 个字符。POST 请求通常没有长度限制，或限制更大。
• 安全性: POST 比 GET 更安全，因为数据不会暴露在 URL 中，但仍然需要使用 HTTPS 来加密数据传输。别天真地以为 POST 就绝对安全了，只是相对好点。
• 用途: GET 用于获取数据，不应该修改服务器上的数据。POST 用于提交数据，可能会修改服务器上的数据。
• 缓存: GET 请求可以被缓存，POST 请求通常不会被缓存。
• 书签: GET 请求可以被添加到书签，POST 请求不能。

什么时候应该使用 GET？

当你想获取数据，并且数据量较小，安全性要求不高时，可以使用 GET。例如，搜索、分页等。 举个例子，如果你在做一个博客，用户点击“下一页”按钮，用 GET 请求获取下一页的文章列表就很合适。

什么时候应该使用 POST？

当你想提交数据，并且数据量较大，安全性要求较高时，应该使用 POST。例如，用户注册、登录、上传文件等。比如，用户上传头像，肯定要用 POST，不然把图片数据放在 URL 里，简直是灾难。

GET 请求会修改服务器数据吗？

理论上，GET 请求不应该修改服务器上的数据。HTTP 协议的设计原则是 GET 请求应该是幂等的，也就是说，多次执行同一个 GET 请求，结果应该是一样的。但是，在实际开发中，有些开发者可能会滥用 GET 请求，用来修改服务器上的数据。这是一种不好的做法，应该避免。严格来说，RESTful API 应该遵循 HTTP 协议的规范。

如果表单中包含文件上传，应该使用哪种提交方式？

必须使用 POST 方式，并且 form 标签需要添加 enctype="multipart/form-data" 属性。这个属性告诉浏览器，表单数据需要以多部分的形式进行编码，以便能够传输文件。

  <input type="file" name="file">
  上传

enctype 属性还有其他值吗？

enctype 属性除了 multipart/form-data 之外，还有以下两个值：

• application/x-www-form-urlencoded：这是默认值，表单数据会被编码为 URL 编码的字符串。
• text/plain：表单数据会被编码为纯文本，不进行任何编码。

通常情况下，使用 application/x-www-form-urlencoded 已经足够了。只有在需要上传文件时，才需要使用 multipart/form-data。 text/plain 很少使用。

如何使用 JavaScript 提交表单？

可以使用 JavaScript 的 FormData 对象来构造表单数据，然后使用 fetch API 或 XMLHttpRequest 对象来发送请求。

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认的表单提交行为

  const formData = new FormData(form);

  fetch('/submit', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
});

这段代码首先获取表单元素，然后监听表单的 submit 事件。当表单被提交时，阻止默认的提交行为，创建一个 FormData 对象，并将表单数据添加到该对象中。最后，使用 fetch API 发送 POST 请求，并将 FormData 对象作为请求体。

在服务器端，如何获取 GET 和 POST 请求的数据？

这取决于你使用的服务器端编程语言和框架。以 Node.js 和 Express 框架为例：

• GET 请求: 可以使用 req.query 对象来获取 GET 请求的参数。例如，如果 URL 是 /submit?username=test&password=password123，那么 req.query.username 的值就是 "test"，req.query.password 的值就是 "password123"。

app.get('/submit', (req, res) => {
  const username = req.query.username;
  const password = req.query.password;
  console.log(username, password);
  res.send('Received GET request');
});

• POST 请求: 需要使用中间件来解析 POST 请求的请求体。常用的中间件有 body-parser。

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// 使用 body-parser 中间件来解析 JSON 格式的请求体
app.use(bodyParser.json());
// 使用 body-parser 中间件来解析 URL 编码的请求体
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  console.log(username, password);
  res.send('Received POST request');
});

这段代码首先引入 body-parser 中间件，然后使用 app.use 方法来注册该中间件。注册之后，就可以使用 req.body 对象来获取 POST 请求的参数。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。