x-www-form-urlencoded,form-data,raw 表单请求格式的区别

引言:在项目中通常使用application/json的方式去与后端联调,有天,后端忽然使用了x-www-form-urlencoded的方式,由于之前一直没有使用过,所以在这里对比下这几种方式的核心区别

一、application/x-www-form-urlencoded(默认表单格式)

这是浏览器 HTML 表单的默认提交方式。

格式:键值对,用 & 连接,= 分隔,且会对特殊字符进行 URL 编码(如空格变 %20)。

数据样例:username=John&age=25&comment=Hello%20World

特点:结构扁平,不支持嵌套对象(如数组或 JSON 对象),传输效率高(体积小)。

适用场景:纯文本字段的简单表单提交,且无需上传文件。大多数后端框架(如 Spring MVC)默认会将其自动映射到实体类。

二、multipart/form-data(文件上传专用)

这是 RFC 1867 定义的专用于文件传输的格式。

格式:数据被分割成多个"部分"(Part),每个部分用随机生成的边界分隔符(Boundary)隔开,每个 Part 内部可自带独立的 Content-Type(如 image/png)。

数据样例:

bash 复制代码
------WebKitFormBoundary7MA4YWxk
Content-Disposition: form-data; name="file"; filename="a.jpg"
Content-Type: image/jpeg

特点:体积较大(因为边界符和头信息有额外开销),但支持二进制数据,且可以混合传递文本字段和文件流。

适用场景:只要有文件上传(图片、Excel、视频),必须选这个。注意:前端若用 new FormData(),默认就是这种格式。

三、 raw(纯文本/自定义格式)

这是一类通称,代表请求体是未经任何表单编码的原始文本。具体语义由内部的 Content-Type 决定:

JSON(最常见):Content-Type: application/json。支持深层嵌套、数组、布尔值,结构清晰,是目前前后端分离项目的首选。

XML:Content-Type: application/xml。常用于企业级遗留系统或 SOAP 协议。

纯文本/HTML:Content-Type: text/plain 或 text/html。

特点:灵活性最高,可传递任意复杂结构的数据,但需要后端配合相应的解析器(如 @RequestBody 注解)。

适用场景:RESTful API 接口、微服务间调用、GraphQL 查询。

实战中的"黄金法则"

传普通 JSON 数据:用 raw(JSON)。千万别用 form-data 传 JSON 字符串,后端解析会很痛苦。

传文件:必须用 form-data。如果非要用 raw 传图片,得把图片转成 Base64,这会显著增大网络传输时间,不推荐。

传统页面跳转表单:用 x-www-form-urlencoded。简单快捷,浏览器原生支持。

最后提醒一点:在 Postman 或 Apifox 等调试工具中,选择这些类型后,工具会自动帮你设置对应的 Content-Type 请求头。如果手动拼接请求,千万记得把 Content-Type 头写对,否则后端服务器可能无法正确解析数据。

相关推荐
李明卫杭州1 小时前
Vue2 与 Vue3 自定义指令详解:钩子变化、迁移指南与实战示例
前端·javascript·vue.js
问商十三载1 小时前
大模型GEO内容更新频率:3个节奏规律提收录权重,零成本提30%引用率附更新计划表
前端·人工智能·机器学习
yingyima1 小时前
sed 命令速查手册:从一次午夜事故说起
前端
七月丶1 小时前
线上出 Bug,你还在让用户"清一下缓存"?我用一个插件让每个请求自报版本
前端·javascript·面试
飘尘1 小时前
让AI能够预演现实的世界模型,到底是什么?
前端·人工智能
不简说1 小时前
JS 代码技巧 vol.3 — 10 个防抖节流深挖,小白到老炮的踩坑路
前端·javascript·面试
小智社群2 小时前
VR漫游视频完整版
前端·javascript·音视频
小程故事多_803 小时前
拆解SOP+ReAct对话Agent,告别硬编码,解锁智能对话的柔性迭代能力
前端·人工智能·react.js·前端框架
lzjava20243 小时前
LangChain Prompt提示词工程
前端·langchain·prompt