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

相关推荐
小码哥_常3 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮5 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
她说可以呀7 小时前
Vue插槽
前端·javascript·vue.js
qq_448011167 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan7 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_958352908 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝8 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing039 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel9 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放9 小时前
Python基础语法练习题(73)
java·前端·python