POST请求详解 – PinkMan's blog

2024-8-07 14:34

1576 字

9 分钟

解释之前

我们先基于Http协议，根据Http的请求方法对应的数据传输能力把Http请求分为URL类请求和Body类请求，Url类请求包括但不限于GET、HEAD、OPTIONS、TRACE 等请求方法。Body类请求包括但不限于POST、PUSH、PATCH、DELETE 等请求方法。
在语义上来说，例如GET请求是查询或者获取服务端的资源的，POST请求是向服务器push数据或者创建资源的。其它同类请求方法多少都有点相同的含义，不过它们谁有谁该做的事，例如支持缓存，探测响应头和断点续传等。

URL类请求(比如get请求)只能把参数写在URL后边。

Body类请求(如POST请求)，可以把参数放在URL中，也可以通过body发送数据。

POST请求中content-type有三种编码方式：

application/x-www-form-urlencoded

multipart/form-data

application/json

通过三种方式来传递POST请求的参数：params、data和json

1.params: 这是通过URL传递参数的方式。所有传递的参数都会被编码到URL中。

虽然 POST 请求主要用于传递数据到请求体中，但 URL 参数（params）仍然可以用来附加额外的查询信息。

axios.post('http://example.com/update-profile?session_id=abc123', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

2.data:在发送请求时需要设置content-type为multipart/form-data或application/x-www-form-urlencoded。

对于content-type为multipart/form-data：

这种编码方式通常用于文件上传的场景。它可以将文件与普通字段一起打包，并在发送请求时进行分段编码。

在发送带有文件的请求时，你需要使用 FormData 对象来构建请求主体。每个字段和文件都会成为表单数据的一部分。

我们使用FormData有时候不仅仅要传给后端文件，还需要传给后端对象信息。

使用FormData传对象是用key-value形式的，所以传对象不能传整个对象，要传属性，

后端接口用对象接收即可，因为可以将传来的属性自动封装到实体类中（前端传来的属性名称和实体类

的属性名称一定要一致，否则无法封装）。

const formData = new FormData();
formData.append('field1', 'value1');
formData.append('file', fileInput.files[0]);

axios.post('http://example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

对于 content-type 为 application/x-www-form-urlencoded：

这种编码方式是最传统的方式之一，用于将表单数据作为 URL 编码的形式发送给服务器。它通常用于不需要发送文件的简单表单提交场景。

在 application/x-www-form-urlencoded 编码方式中，数据被编码为 key=value 的形式，多个键值对之间用 & 符号分隔。例如：

field1=value1&field2=value2

const qs = require('qs');

const data = qs.stringify({
  field1: 'value1',
  field2: 'value2'
});

axios.post('http://example.com/submit', data, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

常见场景

简单表单提交: 当你需要提交表单数据时，如果数据仅包含简单的文本字段而不需要文件上传，application/x-www-form-urlencoded 是一个合适的选择。
旧版本的兼容性: 一些旧的服务端接口或遗留系统可能只支持这种编码方式，因此在这些情况下也会使用这种方式。

注意事项

数据大小限制: 由于数据被编码在 URL 中，一些服务器或浏览器可能对 URL 的长度有一定限制。因此，适用于较小的数据量传输。
编码问题: 确保编码特殊字符（如空格、& 等），以避免数据格式问题。

总结来说，application/x-www-form-urlencoded 是一种简单高效的数据传输方式，适用于传输简单的键值对数据。在现代应用中，虽然 application/json 更为常用，但在某些特定场景下，application/x-www-form-urlencoded 依然是不可或缺的选择。

3.json: 通过这种方式传递的参数会出现在请求体中,并且需要设置 Content-Type为`application/json`所有传递的参数都需要被编码为JSON格式。

const data = {
  field1: 'value1',
  field2: 'value2'
};

axios.post('http://example.com/submit', JSON.stringify(data), {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

常见场景

复杂数据结构: 当需要传递嵌套对象或数组时，application/json 是一个很好的选择，因为它能够表达复杂的数据结构。
现代 API: 许多现代的 Web API 和微服务都使用 JSON 作为数据交换格式，因为 JSON 与 JavaScript 的兼容性很好，也易于被各种编程语言处理。
前后端分离: 在前后端分离的架构中，使用 JSON 作为数据传输格式有助于前端和后端之间的解耦和互操作性。

注意事项

数据大小: 与 application/x-www-form-urlencoded 相比，application/json 支持更大的数据量。虽然没有严格限制，但仍需注意服务器和客户端的处理能力。
编码与解析: JSON 数据在传输前需要进行字符串化（JSON.stringify()），在接收端需要解析为对象（JSON.parse()）。确保在前后端之间正确处理这些转换。
安全性: JSON 格式本身并不提供数据加密或其他安全机制。为了保护传输数据的安全，可能需要使用 HTTPS。
兼容性: 现代浏览器和服务器通常都支持 JSON，但在处理非常旧的系统时，可能需要考虑兼容性问题。

application/json 是一种灵活、高效的数据传输方式，特别适用于复杂的数据交换和现代应用中的 API 交互。它的广泛应用和兼容性使其成为当前最流行的数据格式之一。然而，在某些情况下，如需要支持较旧的系统或传输简单的表单数据，application/x-www-form-urlencoded 和 multipart/form-data 依然是有效的选择。

欢迎阅读！

Jillian1159

Windows Chrome

3 周前
2025-8-05 13:26:07

https://shorturl.fm/p7kK2
Mary249

Windows Chrome

3 周前
2025-8-05 13:26:27

https://shorturl.fm/8FsWv
Aurora3221

Windows Chrome

3 周前
2025-8-05 13:43:29

https://shorturl.fm/GbzQd
Kelsey769

Windows Chrome

3 周前
2025-8-05 18:01:43

https://shorturl.fm/0Hau7
Carly4490

Windows Chrome

3 周前
2025-8-05 21:48:09

https://shorturl.fm/5SO7H
Miguel3270

Windows Chrome

3 周前
2025-8-05 23:14:58

https://shorturl.fm/od7Jn
Parker4794

Windows Chrome

3 周前
2025-8-06 6:58:47

https://shorturl.fm/7fEdB
Mike821

Windows Chrome

3 周前
2025-8-06 21:49:18

https://shorturl.fm/HStN5
Aniya2581

Windows Chrome

3 周前
2025-8-07 16:05:45

https://shorturl.fm/yoNge
Joe3271

Windows Chrome

3 周前
2025-8-07 23:32:50

https://shorturl.fm/3Eiyy
Bernice2332

Windows Chrome

2 周前
2025-8-08 5:23:13

https://shorturl.fm/Br4LO
Meagan3131

Windows Chrome

2 周前
2025-8-08 9:32:16

https://shorturl.fm/x4kdP
Dion4467

Windows Chrome

2 周前
2025-8-08 11:21:36

https://shorturl.fm/khXoj
Faith3894

Windows Chrome

2 周前
2025-8-08 15:39:06

https://shorturl.fm/hhyX6
Nathaniel1034

Windows Chrome

2 周前
2025-8-08 17:43:42

https://shorturl.fm/QBSl3
Christian4363

Windows Chrome

2 周前
2025-8-08 21:40:10

https://shorturl.fm/jfl6S
Madison1234

Windows Chrome

2 周前
2025-8-09 11:17:38

https://shorturl.fm/AAGij
Felix2531

Windows Chrome

2 周前
2025-8-09 11:51:28

https://shorturl.fm/hSKz5
Barry4156

Windows Chrome

2 周前
2025-8-09 18:27:12

https://shorturl.fm/WsiRH
Shelby571

Windows Chrome

2 周前
2025-8-09 19:10:09

https://shorturl.fm/l4PoQ
Evelyn3196

Windows Chrome

2 周前
2025-8-10 12:39:11

https://shorturl.fm/DZVQR
Owen3766

Windows Chrome

2 周前
2025-8-10 12:49:52

https://shorturl.fm/F75p8
Katelyn1690

Windows Chrome

2 周前
2025-8-10 19:50:37

https://shorturl.fm/hrq6Y
Julius1245

Windows Chrome

2 周前
2025-8-11 3:36:29

https://shorturl.fm/wddUR
Randy2036

Windows Chrome

2 周前
2025-8-11 6:49:13

https://shorturl.fm/UOghy
Makayla1441

Windows Chrome

2 周前
2025-8-12 6:39:17

https://shorturl.fm/0GV78
Helena4332

Windows Chrome

2 周前
2025-8-12 14:00:11

https://shorturl.fm/6M1FY
Sadie390

Windows Chrome

2 周前
2025-8-13 0:36:50

https://shorturl.fm/sQiqX
Destiny4463

Windows Chrome

2 周前
2025-8-13 2:57:25

https://shorturl.fm/JeHnf
Rosa3597

Windows Chrome

2 周前
2025-8-13 18:30:04

https://shorturl.fm/fz4vq
Brett2590

Windows Chrome

2 周前
2025-8-14 4:06:29

https://shorturl.fm/Ke6Cv
Anne3320

Windows Chrome

2 周前
2025-8-14 12:30:26

https://shorturl.fm/uaLAp
Jaden1315

Windows Chrome

2 周前
2025-8-14 13:18:35

https://shorturl.fm/vQ28p
Tracy518

Windows Chrome

2 周前
2025-8-14 17:55:50

https://shorturl.fm/3f1XF
Sabrina773

Windows Chrome

2 周前
2025-8-14 18:13:43

https://shorturl.fm/MW8Zo
Garrett1181

Windows Chrome

1 周前
2025-8-15 10:29:37

https://shorturl.fm/DVHOh
Makayla2218

Windows Chrome

1 周前
2025-8-15 11:47:45

https://shorturl.fm/ZgjkZ
Barry2587

Windows Chrome

1 周前
2025-8-15 14:06:40

https://shorturl.fm/mEtFX
Aspen3150

Windows Chrome

1 周前
2025-8-16 3:06:42

https://shorturl.fm/oEOG0
Kiera3716

Windows Chrome

1 周前
2025-8-16 9:25:04

https://shorturl.fm/IrCeP
Roland1371

Windows Chrome

1 周前
2025-8-16 16:53:51

https://shorturl.fm/n7dwm
Amira2225

Windows Chrome

1 周前
2025-8-16 19:05:09

https://shorturl.fm/l0NCB
Andres1599

Windows Chrome

7 天前
2025-8-18 17:29:08

https://shorturl.fm/Eo0cr
Percy3805

Windows Chrome

7 天前
2025-8-18 23:49:53

https://shorturl.fm/d4Nln
Monica681

Windows Chrome

7 天前
2025-8-19 1:44:35

https://shorturl.fm/vWvLv
Dallas4236

Windows Chrome

6 天前
2025-8-19 2:14:50

https://shorturl.fm/03Z4h
Jude4896

Windows Chrome

6 天前
2025-8-19 17:18:34

https://shorturl.fm/Gc3bA
Morgan3711

Windows Chrome

6 天前
2025-8-19 23:20:08

https://shorturl.fm/qfums
Norman993

Windows Chrome

5 天前
2025-8-20 12:31:00

https://shorturl.fm/Toxxa
Brandi2036

Windows Chrome

5 天前
2025-8-20 13:29:10

https://shorturl.fm/GCEgc
Jolie2144

Windows Chrome

5 天前
2025-8-20 16:50:00

https://shorturl.fm/YWEyn
Matthias1216

Windows Chrome

5 天前
2025-8-20 18:33:21

https://shorturl.fm/7YSlf
Casey4129

Windows Chrome

5 天前
2025-8-20 22:11:48

https://shorturl.fm/bjOVs
Edgar1735

Windows Chrome

4 天前
2025-8-21 2:38:26

https://shorturl.fm/4WjIY
Billy344

Windows Chrome

4 天前
2025-8-21 11:44:39

https://shorturl.fm/7X1Sz
Rory2851

Windows Chrome

4 天前
2025-8-21 22:49:04

https://shorturl.fm/OFCEJ
Alexa2055

Windows Chrome

3 天前
2025-8-22 10:50:25

https://shorturl.fm/EpeT8
Steve2322

Windows Chrome

3 天前
2025-8-22 15:01:45

https://shorturl.fm/Qjhne
Jillian2470

Windows Chrome

3 天前
2025-8-22 22:54:25

https://shorturl.fm/nZ0eN
Cecilia1787

Windows Chrome

2 天前
2025-8-23 3:31:46

https://shorturl.fm/liIuN
Dante1414

Windows Chrome

2 天前
2025-8-23 11:18:01

https://shorturl.fm/rkmSO
Kylie2686

Windows Chrome

2 天前
2025-8-23 14:16:56

https://shorturl.fm/Sgfyv
Curtis1268

Windows Chrome

2 天前
2025-8-23 20:12:03

https://shorturl.fm/Tk4yi
Londyn1375

Windows Chrome

2 天前
2025-8-23 21:57:26

https://shorturl.fm/ZMgJc
Greyson1528

Windows Chrome

1 天前
2025-8-24 8:51:32

https://shorturl.fm/xkVTn
Anne2348

Windows Chrome

23 小时前
2025-8-24 15:39:19

https://shorturl.fm/HDndu
Rochelle2057

Windows Chrome

7 小时前
2025-8-25 7:27:37

https://shorturl.fm/69Moh
Nigel1756

Windows Chrome

6 小时前
2025-8-25 8:40:10

https://shorturl.fm/KpVRn
Fiona620

Windows Chrome

3 小时前
2025-8-25 10:53:47

https://shorturl.fm/F6hem