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 相关文章推荐
JQuery对checkbox操作 (循环获取)
May 20 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python+pygame实现坦克大战
2019/09/10 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
openCV提取图像中的矩形区域
2020/07/21 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
.net面试题
2016/09/17 面试题
西安当代医院管理研究院笔试题
2015/12/11 面试题
仓库理货员岗位职责
2013/12/18 职场文书
运动会通讯稿500字
2014/02/20 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
七年级作文之冬景
2019/11/07 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Golang表示枚举类型的详细讲解
2021/09/04 Golang
java项目构建Gradle的使用教程
2022/03/24 Java/Android