angularJs中$http獲取后臺數(shù)據(jù)的實例講解
更新時間：2018年08月08日 10:31:07 作者：泠泠在路上
今天小編就為大家分享一篇angularJs中$http獲取后臺數(shù)據(jù)的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
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);
以上這篇angularJs中$http獲取后臺數(shù)據(jù)的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Angular網(wǎng)絡(luò)請求的封裝方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本篇文章主要介紹了詳解angular ui-grid之過濾器設(shè)置，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
ng-options是angular-1.3新出的一個指令,這篇文章就來介紹這個指令的用法.有需要的小伙伴可以參考下。2015-06-06
Ionic + Angular.js實現(xiàn)圖片輪播的方法示例
圖片輪播在我們?nèi)粘ｉ_發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了Ionic + Angular實現(xiàn)圖片輪播的方法，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要介紹了AngularJS常見過濾器用法,結(jié)合實例形式總結(jié)分析了AngularJS大小寫過濾器、貨幣過濾器、日期過濾器、limitTo過濾器、orderBy過濾器及自定義過濾器使用方法,需要的朋友可以參考下2017-07-07
本篇文章主要介紹了angular 中的自定義指令之詳解API，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-03-03
這篇文章主要介紹了淺談angular2路由預加載策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了什么是 AngularJS？AngularJS簡介,本文講解了AngularJS方方面面的基礎(chǔ)知識,AngularJS 是一個為動態(tài)WEB應用設(shè)計的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴展HTML的語法，讓你能更清楚、簡潔地構(gòu)建你的應用組件,需要的朋友可以參考下2014-12-12
詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11