HTML向服务器发送请求时，核心数据类型主要包括表单编码（application/x-www-form-urlencoded）、JSON格式（application/json）以及文件上传（multipart/form-data），选择哪种类型取决于你传输的是普通文本、结构化数据还是二进制文件。
在Web开发的世界里，前端页面就像是一个忙碌的快递员，而服务器则是仓库管理员，快递员要把货物（数据）送过去，必须按照特定的包装规则（Content-Type）来打包，如果包装不对，仓库管理员可能根本打不开箱子，或者把货物当成垃圾扔掉，理解这些“包装规则”,就是理解HTTP请求数据类型的核心。
基础表单提交：application/x-www-form-urlencoded
这是最古老、最基础的数据传输方式，也是很多初学者最先接触的形式，当你使用标准的HTML表单，且没有指定enctype属性时,浏览器默认就会使用这种格式。
数据格式与编码规则
在这种模式下，数据会被编码为键值对，格式类似于：key1=value1&key2=value2，注意，这里的值如果是中文或特殊字符，会被URL编码（Percent-encoding），空格会变成%20，中文可能会变成%E4%B8%AD%E6%96%87。
业内专家指出，这种格式虽然简单，但在处理复杂数据结构时显得力不从心，它只支持扁平的键值对,无法直接表达嵌套的对象或数组。
适用场景与局限性
- 简单登录注册：用户名和密码通常是扁平数据,非常适合这种格式。
- 传统后端框架：许多老旧的PHP或Java后端系统原生支持这种解析方式。
随着前端框架如Vue、React的普及，以及API接口的复杂化，这种格式逐渐暴露出局限性，它难以表达深层嵌套的数据结构，且URL编码会增加传输体积,尤其在包含大量中文时。
现代API首选：application/json
绝大多数前后端分离的项目都倾向于使用JSON格式，这得益于JavaScript原生对JSON的支持,使得数据交换变得极其高效和直观。
为什么JSON成为主流？
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它使用易读的文本来传输由属性值对构成的数据，相比表单编码,JSON的优势在于：
- 结构清晰：可以轻松表达对象、数组、嵌套结构。
- 语言无关：虽然名字里有JavaScript,但几乎所有现代编程语言都内置了JSON解析库。
- 体积小：相比XML，JSON的语法更简洁,传输效率更高。
实操：如何发送JSON请求
在使用Fetch API或Axios发送请求时,你需要显式地设置请求头。
fetch('/api/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: '张三',
age: 25,
hobbies: ['读书', '编程']
})
})
这里的关键是JSON.stringify()，它将JavaScript对象转换为JSON字符串。Content-Type头必须设置为application/json，告诉服务器：“我发过去的是JSON格式的数据，请用对应的解析器处理。”
对比：JSON与表单编码的差异
| 特性 | application/x-www-form-urlencoded | application/json |
|---|---|---|
| 数据结构 | 扁平键值对 | 支持嵌套对象、数组 |
| 可读性 | 一般，需解码 | 高，天然结构化 |
| 浏览器支持 | 原生支持，无需额外处理 | 需手动序列化 |
| 后端解析 | 多数框架自动解析 | 需配置JSON解析中间件 |
行业共识认为，在构建RESTful API时，除非是兼容旧系统，否则应优先选择JSON格式，它不仅提高了开发效率,还降低了前后端沟通的成本。
文件上传专用：multipart/form-data
当你的需求不仅仅是发送文本，还要上传头像、文档或图片时，表单编码和JSON都无能为力，这时，你需要使用multipart/form-data。
二进制数据的挑战
JSON和表单编码都是基于文本的协议，无法直接传输二进制数据，文件上传需要将数据分割成多个部分（part），每个部分包含文件元数据（如文件名、类型）和文件内容本身。
HTML表单实现
在HTML中，要实现文件上传,必须满足两个条件：
- 表单的
method属性设为POST。 - 表单的
enctype属性设为multipart/form-data。
<form action="/upload" method="POST" enctype="multipart/form-data"> <input type="text" name="username" /> <input type="file" name="avatar" /> <button type="submit">上传</button> </form>
JavaScript中的File对象
在现代前端开发中，我们通常使用FormData对象来构建multipart请求。
const formData = new FormData();
formData.append('username', '张三');
formData.append('avatar', fileInput.files[0]);
fetch('/upload', {
method: 'POST',
body: formData
// 注意：不要手动设置Content-Type，浏览器会自动添加boundary
})
这里有一个常见的陷阱：不要手动设置Content-Type为multipart/form-data，浏览器需要自动添加一个随机的边界字符串（boundary）来分隔各个部分，如果你手动设置，浏览器不会添加这个边界,导致服务器无法解析。
如何选择正确的请求类型？
面对多种数据类型，开发者常常感到困惑，选择哪种类型,取决于你的业务场景和数据特征。
决策流程图
- 是上传文件吗？
- 是 -> 使用
multipart/form-data。 -
否 -> 继续判断。
- 是 -> 使用
- 数据结构是否复杂（嵌套对象、数组）？
- 是 -> 使用
application/json。 - 否 -> 继续判断。
- 是 -> 使用
- 是否需要兼容老旧后端系统？
- 是 -> 使用
application/x-www-form-urlencoded。 - 否 -> 优先使用
application/json。
- 是 -> 使用
常见误区与避坑指南
- 混淆Content-Type与Accept：
Content-Type告诉服务器你发送的是什么格式，Accept告诉服务器你想要接收什么格式，两者方向相反,切勿混淆。 - JSON序列化错误：发送JSON时，忘记使用
JSON.stringify()会导致发送出[object Object],服务器无法解析。 - 文件上传时手动设置Header：如前所述，这会导致boundary缺失,上传失败。
Q&A：关于HTML向服务器发送请求数据类型的常见问题
application/json和application/x-www-form-urlencoded的主要区别是什么？
主要区别在于数据结构的支持能力和编码方式。application/x-www-form-urlencoded仅支持扁平的键值对，且值会被URL编码；而application/json支持嵌套对象、数组等复杂结构，且直接传输原始JSON字符串，无需URL编码,更适合现代API的数据交换。
为什么上传文件时必须使用multipart/form-data？
因为JSON和表单编码都是基于文本的协议，无法直接表示二进制数据。multipart/form-data允许将数据分割成多个部分，每个部分可以包含文本元数据和二进制文件内容，并通过随机生成的边界字符串进行分隔,从而支持文件的完整传输。
在Vue或React项目中，如何正确发送JSON请求？
在Vue或React中，通常使用Axios或Fetch API，关键步骤是：1. 将JavaScript对象通过JSON.stringify()转换为JSON字符串；2. 在请求配置中设置headers为{ 'Content-Type': 'application/json' }；3. 将转换后的字符串放入body或data字段中发送。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/354439.html
评论列表（1条）
说到我心坎里了，以前做项目总搞混格式，现在看这个还是晕。为什么男生都这么理性啊，看个技术文都这么冷冰冰的，emmm