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 头写对,否则后端服务器可能无法正确解析数据。

相关推荐
用户938515635074 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep5 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端5 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
浮生望5 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端
90后的晨仔6 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔6 小时前
别再搞混了!uni-app 中 node_modules 和 uni_modules 到底是什么关系?
前端
kyriewen7 小时前
面试官问"这段逻辑为什么这样写"——我才发现,这半年我写的代码,我自己都解释不了
前端·javascript·面试
谢小飞7 小时前
大文件上传很难?学会这招,GB文件秒传不是梦
前端·node.js
程序员黑豆7 小时前
Windows 系统 Java 环境变量配置全攻略:解决“不是内部或外部命令”
java·前端·ai编程
To_OC8 小时前
别只拿 useRef 绑 DOM 了,搭配 Web Worker 解决页面卡顿才是真的香
前端·react.js·dom