数据编码方式 ------总结网络请求中常见的4种数据编码方式

Ylucius

已于 2024-09-18 18:49:32 修改

阅读量387

点赞数 13

文章标签： java 前端学习后端

于 2024-09-18 18:44:57 首次发布

本文链接：https://blog.csdn.net/Yluciud/article/details/142340379

版权

引子

在Web开发中，表单（<form>）用于收集用户输入的数据。当用户提交表单时，数据会被发送到服务器进行处理。根据不同的场景需求，表单可以采用不同的数据格式来发送数据。通常有两种主要的数据格式：application/x-www-form-urlencoded 和 multipart/form-data。此外，还有 text/plain 这种较少使用的格式。下面分别介绍这三种的数据格式：

1. application/x-www-form-urlencoded

这是最常见的表单数据格式。当表单的 method 属性为 POST 或 GET 并且 enctype 属性未指定或为空时，默认会使用这种格式。在这种格式下，表单数据会被编码为名称/值对的形式，每个名称/值对由等号 (=) 分隔，多个名称/值对之间由与号 (&) 分隔。

特点

键值对形式：数据以键值对的形式发送，每个键值对由等号 (=) 分隔，多个键值对之间由与号 (&) 分隔。
URL 编码：特殊字符会被转义成 %xx 的形式，例如空格会被转义成 %20。
默认编码方式：当使用 <form> 元素提交数据时，默认情况下如果没有显式指定 enctype 属性，则会使用 application/x-www-form-urlencoded。

使用场景

普通表单数据提交：当表单不包含文件上传时，通常使用这种编码方式。
API 请求：许多 RESTful API 接口在 POST 请求中使用这种编码方式来传递参数。

示例代码

HTML 表单：

1<form action="/submit_form" method="POST">
2    <label for="username">用户名:</label>
3    <input type="text" id="username" name="username"><br>
4    <label for="password">密码:</label>
5    <input type="password" id="password" name="password"><br>
6    <input type="submit" value="提交">
7</form>

HTTP 请求：

1POST /submit_form HTTP/1.1
2Host: example.com
3Content-Type: application/x-www-form-urlencoded
4
5username=John&password=secret

服务器端处理

在服务器端，可以使用框架提供的工具来解析这种编码的数据。例如，在 Node.js 中使用 Express：

1const express = require('express');
2const bodyParser = require('body-parser');
3const app = express();
4
5app.use(bodyParser.urlencoded({ extended: true }));
6
7app.post('/submit_form', (req, res) => {
8    const username = req.body.username;
9    const password = req.body.password;
10    console.log(`Username: ${username}, Password: ${password}`);
11    res.send('Form submitted successfully!');
12});
13
14app.listen(3000, () => {
15    console.log('Server is running on port 3000');
16});

2. multipart/form-data

这种格式主要用于处理文件上传。当表单包含文件上传字段 (<input type="file">) 时，需要将 enctype 属性设置为 multipart/form-data。在这种格式下，每个表单字段都会作为一个独立的部分（part）发送，并且每个部分都有自己的头部信息。

特点

多部分数据：数据被划分为多个部分（part），每个部分有自己的头部信息。
文件上传：主要用于处理文件上传，因为文件数据通常较大且复杂。
必须指定 enctype 属性：当表单包含文件上传字段 (<input type="file">) 时，需要将 enctype 属性设置为 multipart/form-data。

使用场景

文件上传：当需要上传文件时，使用这种编码方式。
混合数据类型：可以同时上传文件和其他表单数据。

示例代码

HTML 表单：

1<form action="/upload_file" method="POST" enctype="multipart/form-data">
2    <label for="file">选择文件:</label>
3    <input type="file" id="file" name="file"><br>
4    <label for="description">描述:</label>
5    <input type="text" id="description" name="description"><br>
6    <input type="submit" value="上传">
7</form>

HTTP 请求：

1POST /upload_file HTTP/1.1
2Host: example.com
3Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
4
5------WebKitFormBoundary7MA4YWxkTrZu0gW
6Content-Disposition: form-data; name="description"
7
8这是一个描述
9------WebKitFormBoundary7MA4YWxkTrZu0gW
10Content-Disposition: form-data; name="file"; filename="example.txt"
11Content-Type: text/plain
12
13文件内容
14------WebKitFormBoundary7MA4YWxkTrZu0gW--

服务器端处理

在服务器端，同样可以使用框架提供的工具来解析这种编码的数据。例如，在 Node.js 中使用 Multer：

1const express = require('express');
2const multer = require('multer');
3const app = express();
4
5const storage = multer.diskStorage({
6    destination: function (req, file, cb) {
7        cb(null, 'uploads/');
8    },
9    filename: function (req, file, cb) {
10        cb(null, file.fieldname + '-' + Date.now());
11    }
12});
13
14const upload = multer({ storage: storage });
15
16app.post('/upload_file', upload.single('file'), (req, res) => {
17    const description = req.body.description;
18    const file = req.file;
19    console.log(`Description: ${description}`);
20    console.log(`File uploaded: ${file.path}`);
21    res.send('File uploaded successfully!');
22});
23
24app.listen(3000, () => {
25    console.log('Server is running on port 3000');
26});

、

总结

application/x-www-form-urlencoded：用于普通表单数据的提交，适合不需要文件上传的情况。
multipart/form-data：用于包含文件上传的表单数据提交。

选择合适的 enctype 属性对于确保表单数据正确传输非常重要。

`3.text/plain`

text/plain 是一种 MIME 类型（Multipurpose Internet Mail Extensions），用于表示纯文本数据。这种数据编码方式主要用于传输未经格式化的文本数据。

特点

简单性：text/plain 仅包含普通的 ASCII 或 Unicode 文本，没有任何特殊的格式或结构。
兼容性：几乎所有文本编辑器和编程语言都可以处理 text/plain 数据。
无格式化：不像 HTML 或 JSON 那样具有结构化的数据格式，text/plain 就是一段普通的文本字符串。

使用场景

text/plain 通常用于以下场景：

简单的文本消息：例如，发送简单的文本消息而不包含任何格式化或结构。
调试输出：在开发过程中，有时需要输出原始的文本数据进行调试。
配置文件：某些配置文件可能会使用纯文本格式存储，方便手动编辑。

示例

作为 HTTP 响应

当服务器返回 text/plain 数据时，HTTP 响应头会包含 Content-Type: text/plain：

1HTTP/1.1 200 OK
2Content-Type: text/plain
3
4Hello, World!
5This is a simple text message.

在客户端发送 text/plain 数据时，可以设置 Content-Type 为 text/plain：

1fetch('https://example.com/api/message', {
2  method: 'POST',
3  headers: {
4    'Content-Type': 'text/plain'
5  },
6  body: 'Hello, World!'
7})
8.then(response => response.text())
9.then(data => console.log(data))
10.catch(error => console.error('Error:', error));

示例代码

以下是一个使用 Node.js 处理 text/plain 数据的例子：

服务器端

1const express = require('express');
2const app = express();
3
4app.use(express.text());
5
6app.post('/submit_message', (req, res) => {
7  const message = req.body;
8  console.log(message);
9  res.send('Message received: ' + message);
10});
11
12app.listen(3000, () => {
13  console.log('Server is running on port 3000');
14});

客户端

使用 fetch 发送 text/plain 数据：

1fetch('http://localhost:3000/submit_message', {
2  method: 'POST',
3  headers: {
4    'Content-Type': 'text/plain'
5  },
6  body: 'Hello, World!'
7})
8.then(response => response.text())
9.then(data => console.log(data))
10.catch(error => console.error('Error:', error));

总结

text/plain 是一种非常简单的数据编码方式，适用于传输纯文本数据。虽然它不像 application/json 或 application/x-www-form-urlencoded 那样具有复杂的结构，但在某些场景下仍然非常有用，尤其是在需要传输简单的文本消息时。

`4.application/json`

介绍

application/json 是一个 MIME 类型（Multipurpose Internet Mail Extensions），用于标识数据是以 JSON（JavaScript Object Notation）格式编码的。这个 MIME 类型在 Web 开发中非常常见，特别是在 RESTful API 中用于数据交换。

1. 用途

API 数据交换：现代 Web API 经常使用 application/json 类型来发送和接收数据。
配置文件：某些配置文件也采用 JSON 格式存储，便于解析和编辑。

2. HTTP 头部

当你在 HTTP 请求或响应中使用 JSON 数据时，通常会在 Content-Type 头部指定 application/json。例如：

请求头

1POST /api/data HTTP/1.1
2Host: example.com
3Content-Type: application/json
4
5{
6  "key": "value",
7  "another_key": 123
8}

响应头

1HTTP/1.1 200 OK
2Content-Type: application/json
3
4{
5  "status": "success",
6  "message": "Data retrieved successfully."
7}

3. JSON 数据格式

JSON 数据通常是一个包含键值对的对象或数组。以下是一个简单的 JSON 示例：

1{
2  "name": "张三",
3  "age": 30,
4  "isStudent": false,
5  "hobbies": ["阅读", "旅行", "编程"],
6  "address": {
7    "street": "和平路",
8    "city": "北京",
9    "country": "中国"
10  }
11}