溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、概念介紹
1、POST請求：HTTP/1.1 協議規定的 HTTP 請求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。其中 POST 一般用來向服務端提交數據。
2、 Content-Type ： 是指 http/https 發送信息至服務器時的內容編碼類型， Content-Type 用于表明發送數據流的類型，服務器根據編碼類型使用特定的解析方式，獲取數據流中的數據。四種常見的 POST 請求的 Content-Type 數據類型：
3、 Express.js ： Express 是一個保持最小規模的靈活的 Node.js Web 應用程序開發框架，為 Web 和移動應用程序提供一組強大的功能。
本文我們主要介紹 Post 請求的 4 種 Content-Type 數據類型，以及如何使用 Express 來對每種 Content-Type 類型進行解析。已經將完整的代碼實例上傳到 github，github 地址為： https://github.com/fengshi123/request_example，歡迎 star 。
二、四種POST請求的Content-Type數據類型解析
1、application/x-www-form-unlencoded
最常見的 POST 提交數據的方式，瀏覽器的原生 form 表單，如果不設置 enctype 屬性，那么最終就會默認以 application/x-www-form-urlencoded 方式提交數據。
1.1、前端請求代碼
var reqParam = "name=jack";
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(reqParam);
1.2、服務端解析代碼
app.post('/urlencoded', bodyParser.urlencoded({extend:true}), function (req, res) {
var result = {
name: req.body.name,
sex: '男',
age: 15
};
res.send(result);
});
1.3、瀏覽器請求 / 響應截圖
請求：
響應：
2、multipart/form-data
使用表單上傳文件時，必須指定表單的 enctype 屬性值為 multipart/form-data . 請求體被分割成多部分，每部分使用 --boundary 分割開始，緊接著內容描述信息，最后是字段具體內容（文本或二進制）；如果傳輸的是文件，還要包含文件名和文件類型信息；
2.1、前端請求代碼
var reqParam = new FormData(document.form2); xhr.send(reqParam);
2.2、服務端解析代碼
express 提供了兩種插件 formidable 和 multiparty 來處理數據類型為 multipart/form-data 的情況，以下我們分別用兩個插件進行處理；
2.2.1、formidable 插件
（1）安裝插件
npm install formidable --save
（2）服務端解析處理
app.post('/formData1', function (req, res) {
var form = new formidable.IncomingForm();
form.uploadDir = "upload/";
form.parse(req, function (err, fields, files) {
var obj = {};
Object.keys(fields).forEach(function (name) {
obj[name] = fields[name];
});
Object.keys(files).forEach(function (name) {
if (files[name] && files[name].name) {
obj[name] = files[name];
fs.renameSync(files[name].path, form.uploadDir + files[name].name);
}
});
res.send(obj);
});
});
2.2.2、multiparty 插件
（1）安裝插件
npm install multiparty--save
（2）服務端解析處理
app.post('/formData2', function (req, res) {
// 解析一個文件上傳
var form = new multiparty.Form();
//設置編輯
form.encoding = 'utf-8';
//設置文件存儲路徑
form.uploadDir = "upload/";
//設置單文件大小限制
form.maxFilesSize = 2000 * 1024 * 1024;
form.parse(req, function (err, fields, files) {
var obj = {};
Object.keys(fields).forEach(function (name) {
obj[name] = fields[name];
});
Object.keys(files).forEach(function (name) {
if (files[name] && files[name][0] && files[name][0].originalFilename) {
obj[name] = files[name];
fs.renameSync(files[name][0].path, form.uploadDir + files[name][0].originalFilename);
}
});
res.send(obj);
});
});
2.3、瀏覽器請求 / 響應截圖
請求：
響應：
3、application/json
application/json 這個 Content-Type 作為響應頭，用來告訴服務端消息主體是序列化后的 JSON 字符串。由于 JSON 規范的流行，除了低版本 IE 之外的各大瀏覽器都原生支持 JSON.stringify ，服務端語言也都有處理 JSON 的函數，使用 JSON 不會遇上什么麻煩。
3.1、前端請求代碼
var reqParam = {
name: 'jack'
};
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(reqParam));
3.2、服務端解析代碼
app.post('/applicationJson', bodyParser.json(), function (req, res) {
var result = {
name: req.body.name,
sex: '男',
age: 15
};
res.send(result);
});
3.3、瀏覽器請求 / 響應截圖
請求：
響應：
4、text/xml
它是一種使用 HTTP 作為傳輸協議， XML 作為編碼方式的遠程調用規范,它的使用也很廣泛，能很好的支持已有的 XML-RPC 服務。不過， XML 結構還是過于臃腫，一般場景用 JSON 會更靈活方便。
4.1、前端請求代碼
var text = '<?xml version="1.0"?><methodCall><methodName>examples.getStateName</methodName>' + '<params><param><value><i4>41</i4></value></param></params></methodCall>';
xhr.setRequestHeader('Content-type', 'text/xml');
xhr.send(text);
4.2、服務端解析代碼
app.post('/textXml', bodyParser.urlencoded({extend:true}), function (req, res) {
var result = '';
req.on('data', function (chunk) {
result += chunk;
});
req.on('end', function () {
res.send(result);
});
});
4.3、瀏覽器請求 / 響應截圖
請求：
響應：
三、踩坑匯總
1、對于跨域請求，當 contentType 改為 application/json ，將觸發瀏覽器發送一個預檢 OPTIONS 請求到服務器，再發送正常的 post 請求；
2、使用 new FormData() ，然后設置 Content-type 為 application/x-www-form-urlencoded 或者 multipart/form-data 會導致后端無法正常解析，解決方法：就是不進行頭部設置， Content-type 會默認 為 multipart/form-data ，服務端正常解析；
3、 contentType 設置為 application/x-www-form-urlencoded 時，傳給后端的請求參數為 JSON 字符串， chrome 調試框查看發送的請求參數多了冒號，如下所示：
這是因為 application/x-www-form-urlencoded 它將被解析成鍵值對展示，但是字符串進去是沒有改變的，但是展示的時候能看見。解決方法：如果為 JSON 字符串，則設置數據類型為 application/json ；
四、總結
本文我們主要介紹 Post 請求的 4 種 Content-Type 數據類型，以及如何使用 Express 來對每種 Content-Type 類型進行解析。已經將完整的代碼實例上傳到 github ， github 地址為：https://github.com/fengshi123/request_example，歡迎 star 。 demo 截圖如下所示：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
