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

相关推荐
xy345320 分钟前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计
老王以为26 分钟前
走进 AI Agent 第四篇(上):知识获取管道——RAG 基础
前端·人工智能·全栈
夏天要喝冰可乐39 分钟前
一处写作,多平台分发:我给掘金做了一款开源 Chrome 插件
前端·chrome·vibecoding
货拉拉技术1 小时前
货拉拉开源Hadice:安卓 & 鸿蒙桌面调试工具
前端
程序猿DD1 小时前
OctaFuse Gateway 2.11.0:流式请求优化、用户折扣策略与错误契约升级
前端·后端
尾善爱看海2 小时前
《JavaScript 数组操作全攻略:12 类 API + 30 个实战场景 + 20 个避坑指南》
前端·javascript·面试
计算机魔术师2 小时前
Anthropic 估值冲 4 万亿,但企业客户已经偷偷换了便宜模型
前端
王六米。2 小时前
RAG知识库建设 文档解析 切分与索引如何衔接
服务器·前端·网络·企业数字化转型·智钳智能盒子
名字还没想好☜2 小时前
React 文件上传实战:预览 URL 回收、多文件逐个进度与拖拽放置区踩坑
前端·react·next.js