angular中的post請(qǐng)求處理示例詳解
前言
項(xiàng)目angular中使用jQuery請(qǐng)求，想替換為angular自身請(qǐng)求，結(jié)果發(fā)現(xiàn)后臺(tái)沒(méi)法獲取參數(shù)，所以，查詢(xún)資料分析一下，做個(gè)總結(jié)。
步驟如下：
首先，angular和jQuery中請(qǐng)求是不同的。如下：
- jQuery：
請(qǐng)求contentType是：
application/x-www-form-urlencoded; charset=UTF-8
該類(lèi)型數(shù)據(jù)被編碼成以 '&' 分隔的鍵-值對(duì), 同時(shí)以 '=' 分隔鍵和值. 非字母或數(shù)字的字符會(huì)被百分比編碼: 這也就是為什么這種類(lèi)型不支持二進(jìn)制數(shù)據(jù)(應(yīng)使用 multipart/form-data 代替)。
data參數(shù)是處理過(guò)的：
// json對(duì)象
{ a : 3, b : 2 }
// 將json對(duì)象處理為
"a=3&b=2"
- Angular：
請(qǐng)求contentType:
application/json
data參數(shù)：
// json對(duì)象
{a: 3,c: 2}
綜上來(lái)看，angular提交后臺(tái)是json，不是表單數(shù)據(jù)。我們需要把json對(duì)象轉(zhuǎn)換為參數(shù)拼接，提交后臺(tái)時(shí)就是表單數(shù)據(jù)了：
/**
* 將application/json轉(zhuǎn)換為application/x-www-form-urlencoded
* @param data
*/
handlerPostParams(data) {
const params = [];
for (const key in data) {
if (data[key] && !isNull(data[key])) {
if (data[key] instanceof Array) {
for (let i = 0; i < data[key].length; i++) {
if (data[key][i] && !isNull(data[key][i])) {
const value = data[key][i];
const name = key + '[' + i + ']';
const innerObj = {};
innerObj[name] = value;
params.push(this.handlerPostParams(innerObj));
}
}
} else if (data[key] instanceof Object) {
for (const k in data[key]) {
if (data[key][k] && !isNull(data[key][k])) {
const value = data[key][k];
const name = key + '[' + k + ']';
const innerObj = {};
innerObj[name] = value;
params.push(this.handlerPostParams(innerObj));
}
}
} else {
const param = encodeURIComponent(key) + '=' + encodeURIComponent(data[key]);
params.push(param);
}
}
}
return params.join('&');
}
總結(jié)
到此這篇關(guān)于angular中post請(qǐng)求處理的文章就介紹到這了,更多相關(guān)angular post請(qǐng)求處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談Angular路由守衛(wèi),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
AngularJS是google在維護(hù)，其在國(guó)外已經(jīng)十分火熱，可是國(guó)內(nèi)的使用情況卻有不小的差距，參考文獻(xiàn)/網(wǎng)絡(luò)文章也很匱乏。下面這篇文章主要給大家介紹了關(guān)于Angular.js中數(shù)組操作的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫(huà)
這篇文章主要介紹了Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫(huà),需要的朋友可以參考下2017-05-05
詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
本篇文章主要介紹了詳解angularjs中的隔離作用域理解以及綁定策略，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)?lái)一篇淺談angularJS中的事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
AngularJS基礎(chǔ)學(xué)習(xí)筆記之指令
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令。這篇教程會(huì)為你講述如何自定義指令，以及介紹如何在實(shí)際項(xiàng)目中使用。2015-05-05
angular.JS實(shí)現(xiàn)網(wǎng)頁(yè)禁用調(diào)試、復(fù)制和剪切
這篇文章主要給大家介紹了angular.JS實(shí)現(xiàn)網(wǎng)頁(yè)禁用調(diào)試、復(fù)制和剪切的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
Angular2表單自定義驗(yàn)證器的實(shí)現(xiàn)
本文給大家介紹angular2表單自定義驗(yàn)證器的實(shí)現(xiàn)，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
Angularjs使用ng-repeat中$even和$odd屬性的注意事項(xiàng)
無(wú)可否認(rèn)angularjs的崛起成為前端很大的福利，最近接到項(xiàng)目，框架便選中了angularjs。angularjs最吸引人的地方就是數(shù)據(jù)的雙向綁定和指令了，這篇文章主要介紹了Angularjs中使用ng-repeat的$even和$odd屬性的注意事項(xiàng),需要的朋友可以參考下2016-12-12