在http的请求中,formData和request Payload常出现于POST请求中,比如正常的ajax post请求中:
$.ajax({
url:'/index',
type:'post',
dataType:'json',
data:{
name:'acc',
age:13
},
success:res => {
}
})
此时这个请求发出去后,它的content-type: application/x-www-form-urlencoded
,而且这是一个默认参数,form表单的默认情况下,其enctype也是设置为此属性。在请求头的底部,你也可以看到发送的参数出现在FromData
中。
如果我们把上面的代码改一下:
$.ajax({
url:'/index',
type:'post',
dataType:'json',
contentType: 'application/json',
data:{
name:'acc',
age:13
},
success:res => {
}
})
此时这个请求发出去后,它的content-type: application/json
,在请求头的底部,你也可以看到发送的参数出现在Request Payload
中。
除此之外,最近的新request Fetch API也能做到这一点。
var data = { 'name': 'pdd', 'password': 19 }
fetch('/post', {
method: 'post',
headers: new Headers({
'Content-Type': 'application/json'
}),
body: JSON.stringify(data)
}).then(res => res.text())
.then(res => {
console.log('post-data', res);
})
关于fetch
,在此文章中不做详细介绍,大家可以看我的另一篇关于fetch的文章,里面有一些对API的介绍,以及一些使用方法,性能测试的Demo。
言归正传,从上面几个例子我们清晰的可以看出,传输的参数会出现在formData
中还是request Payload
中,取决于content-type
。
那么什么是content-type
?content-type
是什么呢?MDN上对其专业的解释如下:
Content-Type 实体头部用于指示资源的MIME类型 media type 。
在响应中,Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找,并不一定遵循此标题的值;
为了防止这种行为,可以将标题 X-Content-Type-Options 设置为 nosniff。在请求中 (如POST 或 PUT),客户端告诉服务器实际发送的数据类型。
关于MIME
,专业的解释如下:
MIME全称
Multipurpose Internet Mail Extensions type
。它是一种标准化的方式来表示文档的性质和格式。 它在IETF RFC 6838中进行了定义和标准化。
互联网号码分配机构(IANA)是负责跟踪所有官方MIME类型的官方机构,您可以在媒体类型页面中找到最新的完整列表。
浏览器通常使用MIME类型(而不是文件扩展名)来确定如何处理文档;因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的。
MIME
中的独立类型基本涵盖了我们的日常使用,如下表格:
类型 | 描述 | 典型示例 |
---|---|---|
text | 表明文件是普通文本,理论上是人类可读 | text/plain ,text/html ,text/css , text/javascript |
audio | 表明是某种音频文件 | audio/midi , audio/mpeg , audio/webm , audio/ogg , audio/wav |
video | 表明是某种视频文件 | video/webm , video/ogg |
application | 表明是某种二进制数据 | application/octet-stream , application/pkcs12 , application/vnd.mspowerpoint , application/xhtml+xml , application/xml , application/pdf |
image | 表明是某种图像。 | image/gif ,image/png ,image/jpeg ,image/bmp ,image/webp ,image/x-icon , image/vnd.microsoft.icon |