angularJs中$http获取后台数据的实例讲解


Posted in Javascript onAugust 08, 2018

1.html

<div ng-app="module" ng-controller="ctrl">
 <table border="1" width="600">
  <tr>
   <td>网站名称</td>
   <td>网址</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){
   //成功时执行
   console.log(response);
   $scope.data = response.data; //得到请求的数据
  },function(response){
   //失败时执行 
   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获取后台数据实例,假如一个页面中要异步加载一个后台文件好几次,那么是不是也要请求服务好几次呢?显然这样会使页面的加载出现迟钝,那么,我们可以通过缓存操作来减少服务器压力,使其尽快显示页面数据,那么,具体怎么做呢?很简单,在$http 中添加cache:true, ,即可解决,再刷新页面的时候,只会显示一次重复请求的数据。

$http({
   method:'get',
   url:'1.php',
   cache:true, //避免多次请求后台数据
  }).then(function(response){
   //成功时执行
   console.log(response);
   $scope.data = response.data;
  },function(response){
   //失败时执行 
   console.log(response);
  });

当然,像jquery的ajax请求那样,angularjs也可以进行简写,

m.controller('ctrl', ['$scope', '$http', function ($scope, $http) {
 //post方式
 //$http.post('1.php',{id:1})参数里可加属性
  $http.post('1.php').then(function(response){
   //成功时执行
   console.log(response);
   $scope.data = response.data;
  });
 }]);
m.controller('ctrl', ['$scope', '$http', function ($scope, $http) {
 //get方式
 //$http.get('1.php',{cache:true}) 参数里可加属性
  $http.get('1.php').then(function(response){
   //成功时执行
   console.log(response);
   $scope.data = response.data;
  });
 }]);

最后,来说下 $http服务之后台接收POST数据的几种方式:

<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获取后台数据的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript与有限状态机详解
May 08 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
JavaScript常见JSON操作实例分析
Aug 08 #Javascript
vue.js与后台数据交互的实例讲解
Aug 08 #Javascript
JS实现自定义弹窗功能
Aug 08 #Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 #Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 #Javascript
JS的Ajax与后端交互数据的实例
Aug 08 #Javascript
You might like
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
php fread函数使用方法总结
2019/05/28 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
证婚人经典证婚词
2014/01/09 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
Android studio 简单计算器的编写
2022/05/20 Java/Android