1.html

<div ng-app="module" ng-controller="ctrl"> <table border="1" width="600">  <tr>   <td>網(wǎng)站名稱</td>   <td>網(wǎng)址</td>  </tr>  <tr ng-repeat="v in data">   <td>{{v.name}}</td>   <td>{{v.url}}</td>  </tr> </table></div><script> var m = angular.module('module', []); //注入http服務 m.controller('ctrl', ['$scope', '$http', function ($scope, $http) {  $http({   method:'get', //get請求方式   url:'1.php' //請求地址  }).then(function(response){   //成功時執(zhí)行   console.log(response);   $scope.data = response.data; //得到請求的數(shù)據(jù)  },function(response){   //失敗時執(zhí)行    console.log(response);  }); }]);</script>

1.php

<?php$data = [ [ 'name' => '百度', 'url' => 'www.baidu.com' ], [ 'name' => '騰訊', 'url' => 'www.qq.com' ],];echo json_encode($data,JSON_UNESCAPED_UNICODE);

上面是最簡單的$http獲取后臺數(shù)據(jù)實例，假如一個頁面中要異步加載一個后臺文件好幾次，那么是不是也要請求服務好幾次呢？顯然這樣會使頁面的加載出現(xiàn)遲鈍，那么，我們可以通過緩存操作來減少服務器壓力，使其盡快顯示頁面數(shù)據(jù)，那么，具體怎么做呢？很簡單，在$http 中添加cache:true, ，即可解決，再刷新頁面的時候，只會顯示一次重復請求的數(shù)據(jù)。

  $http({   method:'get',   url:'1.php',   cache:true, //避免多次請求后臺數(shù)據(jù)  }).then(function(response){   //成功時執(zhí)行   console.log(response);   $scope.data = response.data;  },function(response){   //失敗時執(zhí)行    console.log(response);  });

當然，像jquery的ajax請求那樣，angularjs也可以進行簡寫，

 m.controller('ctrl', ['$scope', '$http', function ($scope, $http) { //post方式 //$http.post('1.php',{id:1})參數(shù)里可加屬性  $http.post('1.php').then(function(response){   //成功時執(zhí)行   console.log(response);   $scope.data = response.data;  }); }]);

 m.controller('ctrl', ['$scope', '$http', function ($scope, $http) { //get方式 //$http.get('1.php',{cache:true}) 參數(shù)里可加屬性  $http.get('1.php').then(function(response){   //成功時執(zhí)行   console.log(response);   $scope.data = response.data;  }); }]);

最后，來說下 $http服務之后臺接收POST數(shù)據(jù)的幾種方式：

<div ng-app="module" ng-controller="ctrl"></div><script> var m = angular.module('module', []); m.controller('ctrl', ['$scope', '$http', function ($scope, $http) {  //第一種方式/*  $http({   method:'post',   url:'1.php',   data:{id:1,name:'后盾人'}  }).then(function(response){   console.log(response.data);  })*/ //第二種方式  $http({   method:'post',   url:'1.php',   data:$.param({id:1,name:'后盾人'}),   headers:{'Content-type':'application/x-www-form-urlencoded'}  }).then(function(response){   console.log(response.data);  }) }]);</script>