本文實例講述了AngularJS出現$http異步后臺無法獲取請求參數問題的解決方法。分享給大家供大家參考，具體如下：
angular在通過異步提交數據時使用了與jQuery不一樣的請求頭部和數據序列化方式,導致部分后臺程序無法正常解析數據。
原理分析（網上的分析）：
對于AJAX應用（使用XMLHttpRequests）來說，向服務器發起請求的傳統方式是：獲取一個XMLHttpRequest對象的引用、發起請求、讀取響應、檢查狀態碼，最后處理服務端的響應。整個過程示例如下：
var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() { if(xmlhttp.readystate == 4 && xmlhttp.status == 200) { var response = xmlhttp.responseText; }else if(xmlhttp.status == 400) { //或者可以是任何以4開頭的狀態碼 //優雅地處理錯誤 }};//建立連接xmlhttp.open("GET", "http://myserver/api", true);//發起請求xmlhttp.send();對于簡單、常用而且會經常重復的任務來說，這是一種很煩瑣的工作。如果你想復用以上過程，你應該進行封裝或者使用代碼庫。
AngularJS XHR API遵守一種通常被稱為Promise的接口。由于XHR是異步調用的方法，所以服務端的響應會在未來某個不確定的時間點上返回（我們希望它立即能返回）。Promise接口規定了處理這種響應的方式，并且允許Promise的使用者以一種可預見的方式來使用它。
例如，我們要從服務端獲取一個用戶的信息，假設用來接受請求的后臺接口位于/api/user路徑上，此接口可以接受一個id屬性作為URL參數，那么使用Angular的核心$http服務發起XHR請求的方法示例如下：
$http.get('api/user', {params: {id:'5'}}).success(function(data, status, headers, config) { //加載成功之后做一些事}).error(function(data, status, headers, config) { //處理錯誤});如果你是jQuery使用者，你應該會發現，AngularJS和jQuery在對異步請求的處理方面非常類似。
上面例子中使用的$http.get方法是AngularJS的核心服務$http所提供的眾多快捷方法之一。類似地，如果你想使用AngularJS向同一個URL發送POST請求，同時帶上一些POST數據，你可以像下面這樣做：
var postData = {text:'long blob of text'};//下面這一行會被當成參數附加到URL后面，所以post請求最終會變成/api/user?id=5var config = {params: {id: '5'}};$http.post('api/user', postData, config).success(function(data, status, headers, config) { //成功之后做一些事情}).error(function(data, status, headers, config) { //處理錯誤});對于大多數常用的請求類型，都有類似的快捷方法，這些請求類型包括：GET、HEAD、POST、DELETE、PUT、JSONP。
一.進一步配置請求
雖然標準的請求方式使用起來比較簡單，但是，有時候會存在可配置性不佳的缺點。如果你想要實現下面這些事情就會遇到困難：
a.給請求加上一些授權頭。
b.修改對緩存的處理方式。
c.用一些特殊的方式來變換發送出去的請求，或者變換接收到的響應。
在這些情況下，你可以給請求傳遞一個可選的配置對象，從而對請求進行深度配置。在前面的例子中，我們使用config對象指定了一個可選的URL參數。但是那里的GET和POST方法是一些快捷方式。這種深度簡化之后的方法調用示例如下：
$http(config)
下面是一個基本的偽代碼模板，用來調用前面的這個方法：
$http({ method: string, url: string, params: object, data: string or object, headers: object, transformRequest: function transform(data, headersGetter) or an array of functions, transformResponse: function transform(data, headersGetter) or an array of functions, cache: boolean or Cache object, timeout: number, withCredentials: boolean});GET、POST及其他快捷方法都會自動設置method參數，所以不需要手動設置。config對象會作為最后一個參數傳遞給$http.get和$http.post，所以，在所有的快捷方法內部都可以使用這個參數。你可以傳遞config對象來修改發送的請求，config對象可以設置以下鍵值。
method：一個字符串，表示HTTP請求的類型，例如GET或者POST。
url：URL字符串，表示請求的絕對或者相對資源路徑。
params：一個鍵和值都是字符串的對象（確切來說是一個map），表示需要轉換成URL參數的鍵和值。例如：
[{key1: 'value1', key2: 'value2'}]將會被轉換成
?key1=value&key2=value2
并會被附加到URL后面。如果我們使用js對象（而不是字符串或者數值）作為map中的值，那么這個js對象會被轉換成JSON字符串。
data：一個字符串或者對象，它會被當作請求數據發送。
timeout：在請求超時之前需要等待的毫秒數。
二.設置HTTP頭
AngularJS帶有一些默認的請求頭，Angular發出的所有請求上都會帶有這些默認的請求頭信息。默認請求頭包括以下兩個：
1.Accept:appliction/json,text/pain,/
2.X-Requested-With: XMLHttpRequest
如果想設置特殊的請求頭，可以用如下兩種方法實現。
第一種方法，如果你想把請求頭設置到每一個發送出去的請求上，那么你可以把需要使用的特殊請求頭設置成AngularJS的默認值。這些值可以通過$httpProvider.defaults.headers配置對象來設置，通常會在應用的配置部分來做這件事情。所以，如果你想對所有的GET請求使用“DO NOT TRACK"頭，同時對所有請求刪除Requested-With頭，可以簡單地操作如下：
angular.module('MyApp', []). config(function($httpProvider) { //刪除AngularJS默認的X-Request-With頭 delete $httpProvider.default.headers.common['X-Requested-With']; //為所有GET請求設置DO NOT TRACK $httpProvider.default.headers.get['DNT'] = '1';});如果你只想對某些特定的請求設置請求頭，但不把它們作為默認值，那么你可以把頭信息作為配置對象的一部分傳遞給$http服務。同樣的，自定義頭信息也可以作為第二個參數的一部分傳遞給GET請求，第二個參數還可以同時接受URL參數。
$http.get('api/user', { //設置Authorization(授權)頭。在真實的應用中，你需要到一個服務里面去獲取auth令牌 headers: {'Authorization': 'Basic Qzsda231231'}, params: {id:5}}).success(function() {//處理成功的情況 });三.緩存響應
對于HTTP GET請求，AngularJS提供了一個開箱即用的簡單緩存機制。默認情況下它對所有請求類型都不可用，為了啟用緩存，你需要做一些配置：
$http.get('http://server/myapi', { cache: true}).success(function() {//處理成功的情況});這樣就可以啟用緩存，然后AngularJS將會緩存來自服務器的響應。下一次向同一個URL發送請求的時候，AngularJS將會返回緩存中的響應內容。緩存也是智能的，所以即使你向同一個URL發送多次模擬的請求，緩存也只會向服務器發送一個請求，而且在收到服務端的響應之后，響應的內容會被分發給所有請求。
但是，這樣做有些不太實用，因為用戶會先看到緩存的舊結果，然后看到新的結果突然出現。例如，當用戶即將點擊一條數據時，它可能會突然發生變化。
注意，從本質上來說，響應（即使是從緩存中讀取的）依然是異步的。換句話說，在第一次發出請求的時候，你應該使用處理異步請求的方式來編碼。
四.轉換請求和響應
對于所有通過$http服務發出的請求和收到的響應來說，AngularJS都會進行一些基本的轉換，包括如下內容。
1.轉換請求
如果請求的配置對象屬性中包含JS對象，那么就把這個對象序列化成JSON格式。
2.轉換響應
如果檢測到了XSRF（Cross Site Request Forgery的縮寫，意為跨站請求偽造，這是跨站腳本攻擊的一種方式）前綴，則直接丟棄。如果檢測到了JSON響應，則使用JSON解析器對它進行反序列化。
如果你不需要其中的某些轉換，或者想自已進行轉換，可以在配置項里面傳入自已的函數。這些函數會獲取HTTP的request/response體以及協議頭信息，然后輸出序列化、修改之后的版本?？梢允褂胻ransformLRequest和transformResponse作為key來配置這些轉換函數，而這兩個函數在模塊的config函數中是用$httpProvider服務來配置的。
我們什么時候需要使用這些東西呢？假設我們有一個服務，它更適合用jQuery的方式來操作。POST數據使用key1=val1&key2=val2(也就是字符串)形式來代替{key1:val1, key2:val2}JSON格式。我們可以在每個請求中來進行這種轉換，也可以添加一個獨立transformRequest調用，對于當前這個例子來說，我們打算添加一個通用的transformRequest，這樣所有發出的請求都會進行這種從JSON到字符串的轉換。下面就是實現方式：
var module = angular.module('myApp');module.config(function($httpProvider) { $httpProvider.defaults.transformRequest = function(data) { //使用jQuery的param方法把JSON數據轉換成字符串形式 return $.param(data); };});實列配置：
在使用中發現后臺程序還是無法解析angular提交的數據，對比后發現頭部缺少‘X-Requested-With'項
所以在配置中加入：
下面貼入測試時的部分配置代碼：
angular.module('app', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch'],function ($httpProvider) { // 頭部配置 $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; $httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript, */*; q=0.01'; $httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'; /** * 重寫angular的param方法，使angular使用jquery一樣的數據序列化方式 The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj * @return {String} */ var param = function (obj) { var query = '', name, value, fullSubName, subName, subValue, innerObj, i; for (name in obj) { value = obj[name]; if (value instanceof Array) { for (i = 0; i < value.length; ++i) { subValue = value[i]; fullSubName = name + '[' + i + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if (value instanceof Object) { for (subName in value) { subValue = value[subName]; fullSubName = name + '[' + subName + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if (value !== undefined && value !== null) query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; } return query.length ? query.substr(0, query.length - 1) : query; }; // Override $http service's default transformRequest $httpProvider.defaults.transformRequest = [function (data) { return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }];}).config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl' }) .otherwise({ redirectTo: '/' }); });希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
