前端最常用的三种Content-Type请求类型

一、Content-type的概念

Content-Type是一个请求头参数，决定了发送的数据格式是以怎样一种编码方式传送的。

二、两种使用场景(表单提交和ajax请求)

1、用form表单提交

get请求是没有Content-Type请求头的。数据是按键值对的形式拼接在url后面传送到后端。

Post请求的请求头Content-Type是通过在form表单添加属性enctype来确定的，可以设置两种值application/x-www-form-urlencoded以及 multipart/form-data.

• Content-Type: 'application/x-www-form-urlencoded'的时候，数据格式如下（传送的数据也是键值对形式）：

view source:

• Content-Type: 'multipart/form-data'的时候（一般是有文件，图片等的上传时用），数据格式如下:

2、用ajax提交

get请求是没有Content-Type请求头的。数据是按键值对的形式拼接在url后面传送到后端。

Post请求的请求头常用的有application/x-www-form-urlencoded、multipart/form-data、appliction/json.

• Content-Type: application/x-www-form-urlencoded 这个就是和form 表单设置enctype="application/x-www-form-urlencoded"提交一样，不过参数需要使用key=value形式并用&连接成字符串， 同时需要设置Content-Type请求头。

function Request(type, url, data, header){ 
var xhr = new XMLHttpRequest();  
var type = type.toUpperCase(); 
if(typeof data == 'object'){ 
var str = ''; 
for(var key in data){ 
str += key+'='+data[key]+'&';
} 
data = str.replace(/&$/, ''); 
} 
xhr.open(type, url, true); 
if(header) { Object.keys(header).forEach((key) => { xhr.setRequestHeader(key, header[key]); }) } 
xhr.send(data); } 
Request('POST', 'www.xxx.com', {firstname: 'mickey', lastname: 'Mouse' }, 
{"Content-Type": "application/x-www-form-urlencoded"})

• Content-Type: multipart/form-data 这个就是和form 表单设置multipart/form-data提交一样，参数需要通过var param = new FormData() 然后将参数param.append(key, val)。 切记： 不能手动的设置Content-Type:'multipart/form-data'请求头。

function mapToFormData(obj) { 
const formData= new FormData() 
Object.keys(obj).forEach(attr => { formData.append(attr, obj[attr]) }); return formData; } 
var data = { firstname: 'mickey', lastname: 'Mouse' } 
var formatData = mapToFormData(data) 
var xhr = new XMLHttpRequest(); 
xhr.open('POST', 'xxx.com', true); 
xhr.send(formatData)

• Content-Type: application/json 这个是以json的数据格式传输数据， 参数就是一个json数据，具体如下所示：

var data = { firstname: 'mickey', lastname: 'Mouse' } 
var xhr = new XMLHttpRequest(); 
xhr.open('POST', 'xxx.com', true); 
xhr.setRequestHeader('Content-Type', 'application/json') 
xhr.send(JSON.stringify(data))  //注意一定要用JSON.stringify()将参数进行转化

三.总结

1. form表单常用的两种基本提交方式： application/x-www-form-urlencoded 、multipart/form-data. 以及对应数据格式。
2. ajax方式常用的三种基本提交方式： application/x-www-form-urlencoded 、multipart/form-data、application/json以及对应的数据格式。