在HTTP1.1中 规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。
消息体

<method> <request-URL> <version>
<headers>

<entity-body>

method 方法 request-url位置 version 版本
如果使用http2请求1.1服务器需要声明Upgrade: h2c HTTP2-Settings: <base64url encoding of HTTP/2 SETTINGS payload>这样http1.1服务器也可以应答

HTTP 1.1 协议头

GET / HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: <base64url encoding of HTTP/2 SETTINGS payload>

HTTP 1.1响应原始头 使用1.1协议返回

HTTP/1.1 200 OK
Content-Length: 243
Content-Type: text/html
...

当服务器为HTTP/2时更新响应头 ,更新客户端1.1为2.0 在http 返回状态101后,从空行开始发送http2`的数据

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: h2c

[ HTTP/2 connection ...

application/x-www-form-urlencoded

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=123&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

这是form默认的提交格式 ,通常在浏览器表单,默认的.
很多时候都是application/x-www-form-urlencoded,包括ajax例如jquery等框架默认都是application/x-www-form-urlencoded

multipart/form-data

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这个一般是用来上传文件,照片或者zip等等,这种数据解析起来比较麻烦需要寻找特定字符！

application/json

javascript-ajax

$("#b01").click(function(){
$.ajax({

            type: 'post',
            url: '/api/submit.php',
            data: {
                key: key,
                vCode:vCode
            },
            dataType: 'text',
            success: function(data) {
                console.log(data)
                data = JSON.parse(data);
                if (data.code == 1) {
                    mdui.snackbar({
                        message: '提交成功！',
                        position: 'right-top'
                    });
                    $("#qq").val("");
                    $("#toTA").val("");
                } else {
                    mdui.snackbar({
                        message: data.msg,
                        position: 'right-top'
                    });
                }

)};

Response

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

这个比较主流,目前浏览器均支持json解析,包括后端也提供一些类库可以序列化json.前端请放心使用！扩展性也比较强！

text/xml

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>

XML-RPC 协议简单、功能够用，各种语言的实现都有。它的使用也很广泛，如 WordPress 的 XML-RPC Api，搜索引擎的 ping 服务等等。JavaScript 中，也有现成的库支持以这种方式进行数据交互，能很好的支持已有的 XML-RPC 服务。不过，我个人觉得 XML 结构还是繁琐，一般场景用 JSON 会更灵活方便。

上面提到的application/x-www-form-urlencoded,application/form-data这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生 <form> 表单也只支持这两种方式（通过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。