angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解
1.html
<div ng-app="module" ng-controller="ctrl">
<table border="1" width="600">
<tr>
<td>網(wǎng)站名稱(chē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)遲鈍,那么,我們可以通過(guò)緩存操作來(lái)減少服務(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)寫(xiě),
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;
});
}]);
最后,來(lái)說(shuō)下 $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);
以上這篇angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS 表單驗(yàn)證手機(jī)號(hào)的實(shí)例(非必填)
下面小編就為大家?guī)?lái)一篇AngularJS 表單驗(yàn)證手機(jī)號(hào)的實(shí)例(非必填)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
angular學(xué)習(xí)之ngRoute路由機(jī)制
這篇文章主要介紹了angular學(xué)習(xí)之ngRoute路由機(jī)制,ngRoute是一個(gè)Module,提供路由和深層鏈接所需的服務(wù)和指令。有需要的可以了解一下。2017-04-04
AngularJS實(shí)現(xiàn)使用路由切換視圖的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)使用路由切換視圖的方法,結(jié)合學(xué)生信息管理系統(tǒng)為例分析了使用controllers.js控制器來(lái)切換視圖的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
從源碼看angular/material2 中 dialog模塊的實(shí)現(xiàn)方法
這篇文章主要介紹了 從源碼看angular/material2 中 dialog模塊的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證
這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
AngularJS入門(mén)教程之表格實(shí)例詳解
本文主要介紹AngularJS 表格,這里給大家整理了相關(guān)知識(shí),并附代碼實(shí)例,有需要的小伙伴可以參考下2016-07-07
關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解
下面小編就為大家?guī)?lái)一篇關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
angularjs使用gulp-uglify壓縮后執(zhí)行報(bào)錯(cuò)的解決方法
下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報(bào)錯(cuò)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03

