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
属性来指定提交方式。
<form action="/submit" method="GET"> <!-- 表单元素 --> <input type="text" name="username" value="默认用户名"> <button type="submit">提交 (GET)</button> </form> <form action="/submit" method="POST"> <!-- 表单元素 --> <input type="password" name="password"> <button type="submit">提交 (POST)</button> </form>
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"
属性。这个属性告诉浏览器，表单数据需要以多部分的形式进行编码，以便能够传输文件。
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 请求的参数。
评论（已关闭）
评论已关闭