angularJS之$http：與服務器交互

時間 2019-11-12

原文原文鏈接

　　在angularJS中與遠程HTTP服務器交互時會用一個很是關鍵的服務-$http。javascript

- 　$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服務的使用說明，調用以下：html

$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} 設置超時時間

　　二、success爲請求成功後的回調函數，error爲請求失敗後的回調函數，這裏主要是對返回的四個參數進行說明。java

- data 響應體
- status 相應的狀態值
- headers 獲取getter的函數
- config 請求中的config對象，同上第1點

　　爲了方便你們與HTTP服務器進行交互，angularJS提供了各個請求方式下方法。jquery

　　　　　　$http.put/post(url,data,config) url、name必填，config可選ajax

　　　　　　$http.get/delete/jsonp/head(url,confid) url必填，config可選json

　　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>