curTain

当使用 ajax 时,你是否还对 setRequestHeader( "content-type", "*" ) 的几种值傻傻分不清??

不要慌,一次性记住他们…..

1、Content-Type 的值类型

  1. application/json:消息主体是序列化后的 JSON 字符串
  2. application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式
  3. multipart/form-data: 需要在表单中进行文件上传时,就需要使用该格式。常见的媒体格式是上传文件之时使用的
  4. text/plain:数据以纯文本形式(text/json/xml/html)进行编码,其中不含任何控件或格式字符

2、application/json 和 application/x-www-form-urlencoded的区别

2.1 application/json:

作用: 告诉服务器请求的主题内容是json格式的字符串,服务器端会对json字符串进行解析。
好处: 前端人员不需要关心数据结构的复杂度,只要是标准的 json 格式就能提交成功。

使用案例:

1
2
3
4
5
let xhr = new XMLHttpRequest()
xhr.open( type, url, true )
xhr.setRequestHeader( "Content-Type" , "application/json" )
// 传入参数是 JSON 字符串
xhr.send( JSON.stringify( data ) )

2.1 application/x-www-form-urlencoded:

作用:在请求发送过程中会对数据进行序列化处理,以键值对形式 key1=value1&key2=value2 的方式发送到服务器,
好处: 所有浏览器都支持
缺点:需要处理传入的参数为 key1=value1&key2=value2 格式

3、multipart/form-data

form 表单默认编码格式是:application/x-www-form-urlencoded

当表单需要发送文件或图片时,需要设置 enctype 为 multipart/form-data

案例:

1
2
3
4
5
<form action="http://**/uploadImage" method="post" enctype="multipart/form-data" >
<input type="text" name="name" >
<input type="file" name="file" >
<input type="submit" value="提交">
</form>

4. 使用 xhr 发送文件和图片

只需将数据和文件放入 FormData 即可.

案例:

xhr发送文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取文件放入 FormData
var formdata = new FormData()
var elFile = document.getElementById( "myfile" )
elFile.addEventListener( "change", () => {
formdata.append( "file", elFile.files[0] )
// 调用发送文件
sendFile()
})
// 创建 xhr
var xhr = new XMLHttpRequest()
xhr.open( "post", "http://***/uploadImage" )
xhr.onreadystatechange = function(){
if( xhr.status === 200 && xhr.readyState === 4 ){
console.log( "请求成功----" )
console.log( xhr.response )
}
}
function sendFile(){
xhr.send( formdata )
}

5. 总结

这四个属性都能设置在 from 表达上的 enctype 上,

application/json 和 application/x-www-form-urlencoded 设置在 xhr 上,主要的区别是对上传参数的格式不同

multipart/form-data 设置在 form 表单上,用于上传文件和图片.

6. 参考材料

关于Content-Type几种值的区别及用法

http请求content-type包括几种,区别是什么?

XMLHTTP中setRequestHeader方法和参数


 评论