在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
,不过用得非常少)。