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 相关文章推荐
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
js对象基础实例分析
Jan 13 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 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 Hash算法:Times33算法代码实例
2015/05/13 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
Javascript 类型转换方法
2010/10/24 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
node.js实现端口转发
2016/04/14 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
react redux入门示例
2018/04/19 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python中的localtime()方法使用详解
2015/05/22 Python
window下eclipse安装python插件教程
2017/04/24 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
python开发游戏的前期准备
2019/05/05 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
学习python需要有编程基础吗
2020/06/02 Python
蔻驰英国官网:COACH英国
2020/07/19 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
2014年实习期工作总结
2014/11/27 职场文书
书法社团活动总结
2015/05/07 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python