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 相关文章推荐
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
Javascript之String对象详解
Jun 08 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
ES6扩展运算符用法实例分析
Oct 31 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
js实现无缝轮播图插件封装
Jul 31 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
10张动图学会python循环与递归问题
2021/02/06 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
上海某公司.net方向笔试题
2014/09/14 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书