AngularJS（八）：http服務

標籤：實現   擷取   應用   16px   ajax   data   web   cti   不能   

本文也同步發表在我的公眾號“我的天空”

 

 

 http服務

 

之前我們的樣本都是在本地擷取類比資料，在實際應用中，所有的項目都將不可避免的從後台擷取資料，我們都是通過Ajax來實現與伺服器的通訊。在AngularJS中，我們使用http服務來實現與背景資料互動，http服務的使用請看以下代碼：

 

    var app=angular.module("myApp",[]);
    app.controller("person",function($scope,$http){
        $http.get(‘http://test.php‘)
       .success(function(data){
           //載入成功後的處理，data為返回的資料
       }).error(function(data){
           //載入失敗後的處理，data為返回的資料
       })
     });

 

在以上代碼中，我們在控制器代碼中添加了$http模組，這樣便可以使用http服務了，我們採取get的方式訪問了一個url，隨後在success（）與error函數中分別針對載入成功或失敗做相應的處理。測試http服務時請注意，所請求的url必須是在web服務上的，而不能在本地測試。如果要向後台傳遞參數，則應該添加params參數，如下：

 

$http.get(‘http://test.php‘,{params:{id:‘5‘,name:‘張三‘}
    }) .success(function(data){
           ......
    }).error(function(data){
           ......
     })

 

在以上代碼中，我們添加了兩個傳遞到背景參數，分別是id和name，其值分別是“5”與“張三”。

 

如果要使用POST方式與後台通訊，則應使用$http.post()方法，要注意的是params參數應該放在第三個參數位置，如下：

 

$http.post(‘http://test.php‘,‘‘,{params:{id:‘5‘,name:‘張三‘}})

通常，我們會給請求傳遞一個設定物件，以便靈活的對請求進行配置，其調用形式如下：$http(config)，config為一個對象，可對其佈建要求方式（get/post）、請求的url、傳遞參數、逾時時間等。如以上的樣本可寫成如下代碼：

 

$http({
    method:‘post‘,
    url:‘http://test.php‘,
    params:{id:5,name:‘張三‘}
   }).success(function(data){
        ......
   }).error(function(data){
       ......
  })

 

對於config的更多配置參數，可以查閱AngularJS相關文檔。

AngularJS（八）：http服務