在angularJS中與遠程HTTP服務器交互時會用一個非常關鍵的服務-$http。
-
- $http是angular中的一個核心服務，利用瀏覽器的xmlhttprequest或者via JSONP對象與遠程HTTP服務器進行交互。
- $http的使用方式和jquery提供的$.ajax操作比較相同，均支持多種method的請求，get、post、put、delete等。
- $http的各種方式的請求更趨近於rest風格。
- 在controller中可通過與$scope同樣的方式獲取$http對象,e.g. function controller($scope,$http){}
下面進行$http服務的使用說明，調用如下：
$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});
- config為一個JSON對象，其中主要包含該請求的url、data、method等，如{url:"login.do",method:"post",data:{name:"12346",pwd:"123"}}。
- method {String} 請求方式e.g. "GET"."POST"
- url {String} 請求的URL地址
- params {key,value} 請求參數，將在URL上被拼接成？key=value
- data {key,value} 數據，將被放入請求內發送至服務器
- cache {boolean} 若為true，在http GET請求時采用默認的$http cache，否則使用$cacheFactory的實例
- timeout {number} 設置超時時間
2、success為請求成功后的回調函數，error為請求失敗后的回調函數，這里主要是對返回的四個參數進行說明。
-
- data 響應體
- status 相應的狀態值
- headers 獲取getter的函數
- config 請求中的config對象，同上第1點
為了方便大家與HTTP服務器進行交互，angularJS提供了各個請求方式下方法。
$http.put/post(url,data,config) url、name必填，config可選
$http.get/delete/jsonp/head(url,confid) url必填，config可選
url、data、config與$http的參數一致,
下面有一個simple demo用於展示如何使用$http()及$http.post()。
<!DOCTYPE HTML>
<html lang="zh-cn" >
<head>
<meta charset="UTF-8">
<title>CSSClasses</title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ctrl($http,$scope){
$scope.login = function(user){
$http.post("login.do",user).success(function(data, status, headers, config){
alert("success");
}).error(function(data, status, headers, config){
alert("error");
})
}
$scope.login1 = function(user){
$http({url:"login.do",data:user}).success(function(data, status, headers, config){
alert("success");
}).error(function(data, status, headers, config){
alert("error");
})
}
}
</script>
</head>
<body ng-app>
<div ng-controller="ctrl">
<form name="loginFm">
Name:<input ng-model="user.name" />
pwd: <input ng-model="user.pwd" />
<input type="button" value="login" ng-click="login(user)" />
<input type="button" value="login1" ng-click="login1(user)" />
</form>
</div>
</body>
</html>