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

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了武侯免費(fè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服務(wù)
 m.controller('ctrl', ['$scope', '$http', function ($scope, $http) {
  $http({
   method:'get', //get請(qǐng)求方式
   url:'1.php' //請(qǐng)求地址
  }).then(function(response){
   //成功時(shí)執(zhí)行
   console.log(response);
   $scope.data = response.data; //得到請(qǐng)求的數(shù)據(jù)
  },function(response){
   //失敗時(shí)執(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);

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

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

當(dāng)然，像jquery的ajax請(qǐng)求那樣，angularjs也可以進(jìn)行簡(jiǎn)寫，

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

最后，來說下 $http服務(wù)之后臺(tái)接收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獲取后臺(tái)數(shù)據(jù)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：如何在angularJs中使用$http獲取后臺(tái)數(shù)據(jù)
文章來源：http://chinadenli.net/article10/jiigdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、企業(yè)網(wǎng)站制作、電子商務(wù)、微信小程序、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)