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)文章
Angular網(wǎng)絡(luò)請(qǐng)求的封裝方法
本篇文章主要介紹了Angular網(wǎng)絡(luò)請(qǐng)求的封裝方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05詳解angular ui-grid之過(guò)濾器設(shè)置
本篇文章主要介紹了詳解angular ui-grid之過(guò)濾器設(shè)置,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06AngularJS學(xué)習(xí)筆記之ng-options指令
ng-options是angular-1.3新出的一個(gè)指令,這篇文章就來(lái)介紹這個(gè)指令的用法.有需要的小伙伴可以參考下。2015-06-06Ionic + Angular.js實(shí)現(xiàn)圖片輪播的方法示例
圖片輪播在我們?nèi)粘i_(kāi)發(fā)中是再熟悉不過(guò)的了,下面這篇文章主要給大家介紹了Ionic + Angular實(shí)現(xiàn)圖片輪播的方法,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來(lái)一起看看吧。2017-05-05AngularJS常見(jiàn)過(guò)濾器用法實(shí)例總結(jié)
這篇文章主要介紹了AngularJS常見(jiàn)過(guò)濾器用法,結(jié)合實(shí)例形式總結(jié)分析了AngularJS大小寫(xiě)過(guò)濾器、貨幣過(guò)濾器、日期過(guò)濾器、limitTo過(guò)濾器、orderBy過(guò)濾器及自定義過(guò)濾器使用方法,需要的朋友可以參考下2017-07-07Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03什么是 AngularJS?AngularJS簡(jiǎn)介
這篇文章主要介紹了什么是 AngularJS?AngularJS簡(jiǎn)介,本文講解了AngularJS方方面面的基礎(chǔ)知識(shí),AngularJS 是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語(yǔ)言,通過(guò)擴(kuò)展HTML的語(yǔ)法,讓你能更清楚、簡(jiǎn)潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下2014-12-12詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11