使用$http快捷方法與服務端互動
在AngularJS中頁面與服務端互動主要是呼叫模組。
根據請求類型的不同，$http模組提供了不同的呼叫方式 ,其通用的格式如下。
參數解釋：
url：表示一個相對或絕對的服務端請求路徑;
請求類型：包含POST、GET、JSONP、DELETE、PUT、HEAD這6種常見的請求方式。其中POST和PUT類型請求可以透過可選項參數data來傳送數據，也可以透過可選項參數config來設定請求時傳遞的資料。
當$http請求成功時，可以在回呼的success方法中取得服務端傳回的資料和相關資訊。
data：表示參數回傳體，通常是請求傳回的結果集。
status:表示請求後傳回的狀態值。
headers:表示請求後傳回的頭文件，用來顯示傳回請求的頭部資訊。
config：是一個對象，透過這個對象，可以取得發送HTTP請求時完整的設定資訊。
使用$http配置物件方式與服務端互動
上面我們介紹了使用/$http捷徑與服務端互動的過程，這種方式雖然簡便，但是配置時缺少彈性，程式碼量也不少。針對這個情況，我們可以將\$http服務模板當成一個函數來使用，將構造XHR對象的所有配置項作為一個對象，並將對象定義為函數的形參，在調用時，只需要修改對像中的各屬性值即可，具體的呼叫格式如下。
$http({
method: //表示请求方式，是字符串，常有POST、GET、JSONP、DELETE、PUT、HEAD六种方式
url: //表示向服务器请求的地址
data: //是一个对象，在使用POST/PUT时，该对象将作为消息体的一部分发给服务端
params: //是字符串或对象，发送HTTP请求时，如果是对象，将自动按json格式进行序列化，并追加到url后面，作为发送数据的一部分，传递给服务器。
transformRequest://对请求体信息和请求体进行序列化转换，并生成一个数组发送给服务端。
transformResponse://对相应体头信息和相应体进行反序列化转换，其实质就是解析服务器发送来的被序列化后的数据。
cache://布尔值(true/false),表示是否对http请求返回的数据进行缓存，如果设置为true,则表示需要缓存。
timeout://表示延迟http请求的时间，单位是毫秒。})登入後複製
例如：
需求說明：
在頁面中新增一個文字方塊按鈕。 ，當使用者在文字方塊中輸入數字以後，按一下按鈕，則呼叫$http函數向服務端發送HTTP請求，驗證數字的奇偶性，並將驗證結果顯示在頁面元素中。
<!DOCTYPE html><html ng-app="a7_3"><head>
<meta charset="UTF-8">
<title>使用$http配置对象方式与服务端交互</title>
<script src="../script/angular.min.js"></script>
<link href="Css/css7.css" rel="stylesheet" ></head><body>
<p class="frame" ng-controller="c7_3">
<p class="show">
<input type="text" ng-model="num">
<button ng-click="onclick()">验证奇偶</button>
<p class="tip">您输入的是:{{result}}</p>
</p>
</p>
<script type="text/javascript">
angular.module('a7_3',[])
.controller('c7_3',function($scope,$http){
$scope.num = 0;
$scope.result = "偶数";
$scope.onclick = function(){
$http({
method: 'GET',
url: 'data/chk.php',
params:{
n: $scope.num
}
}).success(function(data,status,headers,config){
$scope.result = data;
})
}
});
</script>
</body>
</html>登入後複製
解析：
在本範例的js程式碼中，當使用者點擊按鈕時，觸發按鈕綁定的onclick方法，在該方法中，呼叫了$http服務，並以配置物件的方式向函數傳參，如method、url等屬性值，
因為採用了GET方式請求，因此，透過params屬性將文字方塊中的值以key/value的形式傳遞給伺服器。
在本範例中，請求的URL最終內容為
htpp://localhost/Ch7/data/chk.php?n=87,其中n為鍵名，87為鍵值，也就是文字方塊中輸入的數字。
當/$http函數發送HTTP請求後，可以透過succes方法取得伺服器傳回的資料內容和其他頭信息，如data則是傳回的數據，也就是文字方塊中使用者輸入的數字。
在Angular中，執行/$http函數後，它的返回內容其實是一個promise對象，因此，可以直接透過鍊式的寫法呼叫then方法來取得成功和異常後的資料。
下面兩段程式碼功能是相同的。
$http({//配置对象})
.succes(fn1)
.error(fn2)登入後複製
等價於
$http({//配置对象
})
.then(fn1,fn2)登入後複製
fn1和fn2分別表示請求成功和錯誤是的回傳函數。
雖然兩者的功能相同。但使用then方法可以接收到服務端的完整響應對象，而succes和error方法只是接收解析並處理後的響應對象，也就是說then方法獲取的返回對象更原始和更完整。
以上是AngularJS中$http服務內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
