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服務(wù)
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ù)實例，假如一個頁面中要異步加載一個后臺文件好幾次，那么是不是也要請求服務(wù)好幾次呢？顯然這樣會使頁面的加載出現(xiàn)遲鈍，那么，我們可以通過緩存操作來減少服務(wù)器壓力，使其盡快顯示頁面數(shù)據(jù)，那么，具體怎么做呢？很簡單，在$http 中添加cache:true, ，即可解決，再刷新頁面的時候，只會顯示一次重復(fù)請求的數(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);
});
當(dāng)然，像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服務(wù)之后臺接收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)文章
下面小編就為大家?guī)硪黄狝ngularJS 表單驗證手機號的實例(非必填)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
angular學(xué)習(xí)之ngRoute路由機制
這篇文章主要介紹了angular學(xué)習(xí)之ngRoute路由機制，ngRoute是一個Module，提供路由和深層鏈接所需的服務(wù)和指令。有需要的可以了解一下。2017-04-04
這篇文章主要介紹了AngularJS實現(xiàn)使用路由切換視圖的方法,結(jié)合學(xué)生信息管理系統(tǒng)為例分析了使用controllers.js控制器來切換視圖的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
從源碼看angular/material2 中 dialog模塊的實現(xiàn)方法
這篇文章主要介紹了 從源碼看angular/material2 中 dialog模塊的實現(xiàn)方法,需要的朋友可以參考下2017-10-10
本文主要介紹AngularJS HTML DOM基礎(chǔ)知識，這里整理了相關(guān)資料和示例代碼進行詳解，有需要的小伙伴可以參考下2016-08-08
Angular8基礎(chǔ)應(yīng)用之表單及其驗證
這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗證的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文主要介紹AngularJS 表格,這里給大家整理了相關(guān)知識,并附代碼實例,有需要的小伙伴可以參考下2016-07-07
關(guān)于angular js_$watch監(jiān)控屬性和對象詳解
下面小編就為大家?guī)硪黄P(guān)于angular js_$watch監(jiān)控屬性和對象詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法
下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Angular2 多級注入器詳解的相關(guān)資料,并附簡單實例代碼，需要的朋友可以參考下2016-10-10