Content-Type之请求数据格式

1. Content-Type是啥

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

2. 用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'的时候（一般是有文件，图片等的上传时用），数据格式如下:
  注意两则区别： 前者是form data格式数据，实际传送数据是键值对的格式通过&拼接， 后者是Request payload格式，实际传送是数据通过一个boundary分割符分隔的。

3. 用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(); //不考虑IE兼容
 
    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))
复制代码

4.总结

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