如何在angularJs中使用$http獲取后臺數(shù)據(jù)

本篇文章為大家展示了如何在angularJs中使用$http獲取后臺數(shù)據(jù)，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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>

<?php
#第一種處理方法
//$content = file_get_contents('php://input');
//print_r(json_decode($content,true));

#第二種方式
print_r($_POST);

上述內(nèi)容就是如何在angularJs中使用$http獲取后臺數(shù)據(jù)，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業(yè)資訊頻道。