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以及對應的數據格式。