常见的POST提交方式

╰半夏微凉° 2023-07-01 09:58 195阅读 0赞

HTTP 协议是基于TCP/IP协议之上的应用层规范，规范将 HTTP 请求分为三部分： 请求行、请求头、消息体。整体类似于：

> <method> <request-URL> <version>   // 请求行
> 
> <headers>  // 请求头
> 
> <entity-body>  // 协议体

协议规定 POST 请求的参数必须放在协议体中，但我们在请求头中设置消息主体的协议格式。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到 POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

## 一、application/x-www-form-urlencoded ##

--------------------

常见的 POST 请求提交方式，请求头类似于

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70][]

大部分服务器端都对这种提交方式有很好的支持，例如 [JQuery][] 和 [QWrap][] 的 Ajax，Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8」。

## 二、multipart/form-data ##

--------------------

通常上传文件需要将 Content-Type 设为 multipart/form-data。前端使用 formData对象来加入文件

var form = new FormData();
    form.append('iid', '2');
    form.append('test', '2');
    form.append('file', cfg.Obj, cfg.Name);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1][]

## 三、application/json ##

--------------------

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这可以让我们直接传递 JSON 对象给服务器。axios 中的 post 方法就是默认使用 application/json 方式提交的。

var infoForm = {
        'u': xxxxxx
    }
    this.$post('xxxxxxx/gettest', infoForm)
        .then((response) => {
            ....
        })
        .catch(function (error) {
             console.log(error);
        });

## 四、text/xml ##

--------------------

text/xml 是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的：

> POST http://www.example.com
> 
> HTTP/1.1 Content-Type: text/xml
> 
> <?xml version="1.0"?>
> 
> <methodCall>
> 
>      <methodName>examples.getStateName</methodName>
> 
>      <params> <param>
> 
>      <value><i4>41</i4></value>
> 
> </param> </params> </methodCall>

但 text/xml 过于臃肿，一般场景使用 JSON 会更加灵活

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020012111000143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[JQuery]: http://jquery.com/
[QWrap]: http://www.qwrap.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200121110538156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70