get请求将表单字段按key=value拼成查询字符串并用&连接，追加到url后；需url编码防乱码，但超长或含特殊字符易被截断。
GET请求的数据怎么塞进URL里
浏览器把 form 里所有带 name 的字段，按 key=value 格式拼成查询字符串，再用 & 连接，最后加到 action URL 后面。比如 <input name="q" value="前端"> 和 <select name="cat"><option value="js">JS</option></select> 提交后，URL 变成 /search?q=%E5%89%8D%E7%AB%AF&cat=js。
常见错误现象：
- 中文、空格、斜杠等字符没被正确编码，导致后端收到乱码或截断（实际是 URL 编码缺失）
-
action原本已有查询参数，如/search?tab=all，用 GET 提交后，原参数会被覆盖，只剩表单字段 - 字段值含特殊字符（如
user@domain.com或 Base64 片段），拼接后轻松突破 2048 字符限制，Chrome/Safari 直接丢弃超长部分，后端收不到完整数据
POST 默认用 application/x-www-form-urlencoded 编码
这是 POST 最基础也最容易被忽略的默认行为：所有字段被序列化成 key1=value1&key2=value2 形式，放在请求体里，Content-Type 自动设为 application/x-www-form-urlencoded。
关键点：
- 它只处理文本——
<input type="file">在这种编码下**完全不上传文件内容**，后端看到的只是空字段或文件名字符串 - 空格变成
+，非 ASCII 字符仍需 URL 编码（如中文变%E4%BD%A0） - 服务端必须用对应解析器读取：Express 需
body-parser.urlencoded()，PHP 直接用$_POST，但若用了fetch手动发 JSON，这个中间件就失效
multipart/form-data 是文件上传的唯一合法路径
只要表单里有 <input type="file">，就必须显式设置 enctype="multipart/form-data"。否则文件根本不会进请求体。
它的结构不是键值对，而是靠 boundary 分隔多个部分：
------WebKitFormBoundaryabc123 Content-Disposition: form-data; name="username" admin ------WebKitFormBoundaryabc123 Content-Disposition: form-data; name="avatar"; filename="photo.jpg" Content-Type: image/jpeg <binary data here> ------WebKitFormBoundaryabc123--</binary>
注意：
-
boundary是浏览器自动生成的随机字符串，不可手写；Content-Type头会自动带上boundary=xxx - 普通文本字段也裹进 multipart，不能用
urlencoded解析器读取——Express 必须用multer，Koa 用koa-body，否则req.body为空 - 字段名和文件名都来自
name和filename属性，后端依赖这个做映射，别漏写name
FormData 对象怎么绕过手动编码
用 JavaScript 创建 new FormData(formElement) 是最省心的方式，它自动适配编码类型：没文件时走 urlencoded，有文件时切到 multipart，且不用你管 boundary 或头信息。
实操建议：
- 必须传入真实
<form></form>DOM 元素，不能只传form.id字符串 - 动态添加的字段（如 JS 插入的
<input name="token">）要确保已挂载到 DOM 再构造 FormData - 调用
fetch(url, { method: 'POST', body: formData })时，**不要手动设置Content-Type**——浏览器会自动设对，设了反而破坏 multipart 结构 - 如果后端接收不到字段，先检查浏览器 Network 面板里请求的
Content-Type是否含boundary，没有就是 enctype 或 FormData 构造出问题
真正容易被忽略的是：GET 和 POST 不只是“明文/隐藏”的区别，它们对应的服务端入口、解析逻辑、编码规则、长度限制全都不兼容。混用 method 和后端取参方式（比如 POST 却查 req.query），数据就静默消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
