AngularJS的ng Http Request與response格式轉(zhuǎn)換方法
本文實(shí)例講述了AngularJS的ng Http Request與response格式轉(zhuǎn)換方法。分享給大家供大家參考，具體如下：
angular作為Single Page Application推薦的交互方式當(dāng)然是基于json的ajax調(diào)用。但今天要說(shuō)的是當(dāng)你不幸工作在一個(gè)遺留或者不可控制的服務(wù)上，而這服務(wù)是基于非json提交方式(或許是常規(guī)表單(form)提交，或者其他自定義數(shù)據(jù)格式)，那么我們只能改變ng內(nèi)部$http默認(rèn)request/response格式轉(zhuǎn)化方式。
所幸的是ng $http給我們提供了多種可用方式轉(zhuǎn)化數(shù)據(jù)格式(下面demo將以form提交方式為例):
***對(duì)于部分單獨(dú)的http request設(shè)置：
對(duì)于http ajax方式最后一個(gè)參數(shù)都是關(guān)于http的配置信息，其中包括一項(xiàng)transformRequest，我們可以利用transformRequest在ajax發(fā)送數(shù)據(jù)之前改變數(shù)據(jù)的格式，例如下邊的demo:
$http.post("/url", {
id: 1,
name: "greengerong"
}, {
transformRequest: function(request) {
return $.param(request);
}
});
這里利用jQuery的$.param進(jìn)行表單提交方式的格式轉(zhuǎn)化，所以我們能夠看見(jiàn)的request body 為：
id=1&name=greengerong
***對(duì)于整個(gè)app的http request設(shè)置：
如果我們需要對(duì)整個(gè)http的數(shù)據(jù)轉(zhuǎn)化格式進(jìn)行設(shè)置，那么可以選用在config階段對(duì)$httpProvider默認(rèn)行為進(jìn)行設(shè)置：
angular.module("app", [])
.config(["$httpProvider", function($httpProvider) {
$httpProvider.defaults.transformRequest = [
function(request) {
return $.param(request);
}
];
}
]);
這樣我們就可以輕易的轉(zhuǎn)化為form提交方式。
同樣$http也為我們提供了transformResponse方式，我們也可以創(chuàng)建自己的response轉(zhuǎn)化，比如json之前加入自定義前綴防止json array攻擊等等。
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- JSP 中request與response的用法詳解
- @ResponseBody 和 @RequestBody 注解的區(qū)別
- C#中Request.Cookies 和 Response.Cookies 的區(qū)別分析
- http調(diào)用webservice操作httprequest、httpresponse示例
- Asp.net response對(duì)象與request對(duì)象使用介紹
- ASP.NET筆記之 Request 、Response 與Server的使用
- JSP內(nèi)置對(duì)象:Request和Response的簡(jiǎn)單介紹及使用
- jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對(duì)象的responseXML
- JSP中Servlet的Request與Response的用法與區(qū)別
相關(guān)文章
AngularJS通過(guò)$location獲取及改變當(dāng)前頁(yè)面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過(guò)示例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-09-09
angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法
這篇文章主要介紹了angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-05-05
angularJS自定義directive之帶參方法傳遞詳解
今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
AngularJS 購(gòu)物車(chē)全選/取消全選功能的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇AngularJS 購(gòu)物車(chē)全選/取消全選功能的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Angular環(huán)境搭建及簡(jiǎn)單體驗(yàn)小結(jié)
Angular基于TypeScript和react、vue相比 Angular更適合中大型企業(yè)級(jí)項(xiàng)目，本文通過(guò)實(shí)例代碼給大家分享Angular環(huán)境搭建及簡(jiǎn)單體驗(yàn)，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2021-05-05
angular js的雙向數(shù)據(jù)綁定，在開(kāi)發(fā)中起到的作用灰常大，所以下面這篇文章主要給大家介紹了關(guān)于Angularjs中$apply及優(yōu)化使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧2018-07-07
Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解
這篇文章主要為大家介紹了Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Directive是一個(gè)非常棒的功能。可以實(shí)現(xiàn)我們自義的的功能方法。下面通過(guò)實(shí)例代碼給大家介紹Angularjs自定義指令Directive相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2017-05-05
AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)問(wèn)題及解決方案
這篇文章主要介紹了AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)的問(wèn)題及解決方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08