application/x-www-form-urlencoded与application/json区别以及遇到的坑

场景

在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。

 

application/x-www-form-urlencoded:

窗体数据被编码为名称/值对。这是标准的编码格式。

multipart/form-data:

窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。

text/plain:

窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。


form的enctype属性为编码方式,常用有两种:

application/x-www-form-urlencoded和multipart/form-data

默认为application/x-www-form-urlencoded。当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url。

当action为post时候,浏览器把form数据封装到http body中,然后发送到server。 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Co

<think>嗯,用户想了解URL编码中两种Content-Type的区别application/x-www-form-urlencodedapplication/json。用户引用了多个资料,需要整理出核心差异。 先看基础定义。application/x-www-form-urlencoded是表单默认编码类型,引用[2]提到它会将数据序列化成key=value&key=value格式,特殊字符会被百分号编码。而application/json则是传输结构化JSON数据,引用[5]强调它适合复杂数据如嵌套对象或数组。 数据结构差异明显。前者是平面键值对,引用[1][4]都指出它无法直接表示层级数据;后者支持多层嵌套结构,引用[5]的"复杂结构化数据"说明这点。数据量方面,引用[2][5]暗示JSON更精简,因为前者需要大量&和=连接符。 编码方式也值得对比。引用[2][4]说明前者需手动Percent-encoding,而JSON仅需UTF-8编码字符串。服务器处理时,引用[2][5]提到前者多数框架自动解析为字典,后者需@RequestBody等注解明确反序列化。 使用场景差异很大。前者适合简单表单提交(引用[3]),后者适合API交互(引用[5])。浏览器支持上,前者是原生表单默认行为(引用[2][3]),后者需JS主动设置请求头。 最后想到用户可能需要具体例子辅助理解,准备用用户注册场景的对比案例说明。数据封装部分补充axios的qs.stringify和JSON.stringify差异,呼应引用[2][5]的技术细节。安全方面提醒JSON需防范注入攻击。 用户可能后续会问如何选择或具体实现问题,考虑生成相关问题时要覆盖内容协商、性能比较等方向。</think>以下是 `application/x-www-form-urlencoded` `application/json` 的核心区别对比: --- ### **1. 数据结构** - **x-www-form-urlencoded** 仅支持**平面键值对**,数据格式为: `key1=value1&key2=value2&key3=value3` 非字母数字字符需进行 **Percent-encoding**(如空格→`%20`)[^1][^2][^4]。 *示例:* `username=John%20Doe&age=30&city=New%20York` - **application/json** 支持**结构化数据**(嵌套对象、数组等),格式为 JSON 字符串: `{"username":"John Doe","age":30,"city":"New York"}` 无需手动编码特殊字符(由 UTF-8 处理)[^5]。 --- ### **2. 数据体积** - **x-www-form-urlencoded** 冗余较大:键名重复出现(如 `user.name=John&user.age=30`),`&` 和 `=` 占用额外字节[^2]。 - **application/json** 更紧凑:键名仅出现一次,适合传输复杂数据(如数组 `{"ids":[1,2,3]}`)[^5]。 --- ### **3. 服务器处理** | 类型 | 服务器解析方式 | 后端接收示例(Java) | |--------------------------|----------------------------------|-------------------------------| | **x-www-form-urlencoded** | 自动解析为键值对映射 | `@RequestParam Map<String, String>` | | **application/json** | 需**显式反序列化** JSON 字符串 | `@RequestBody User user` | --- ### **4. 使用场景** - **x-www-form-urlencoded** - 浏览器原生表单提交(默认类型)[^2][^3] - 简单参数传递(如搜索过滤条件) - 兼容老式 API - **application/json** - RESTful API 交互(尤其 POST/PUT)[^5] - 传输嵌套数据(如订单含商品列表) - 前端框架(Axios 等)默认 POST 类型[^5] --- ### **5. 浏览器支持** - **x-www-form-urlencoded**:所有浏览器原生支持表单提交[^3][^4] - **application/json**:需通过 JavaScript(如 `fetch`/`axios`)主动设置请求头[^5] --- ### **示例对比** ```http ### x-www-form-urlencoded POST /submit-form HTTP/1.1 Content-Type: application/x-www-form-urlencoded name=Alice&score=95&courses=math&courses=physics ### application/json POST /api/users HTTP/1.1 Content-Type: application/json { "name": "Alice", "score": 95, "courses": ["math", "physics"] } ``` --- ### **选型建议** - 若数据为**简单键值对**且需兼容浏览器表单 → **`x-www-form-urlencoded`** - 若数据**含嵌套结构**或对接现代 API → **`application/json`** - 上传文件时需用 `multipart/form-data`(两者均不适用)[^3] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值