AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

读取 JSON 文件

以下是存储在web服务器上的 JSON 文件：

Customers_JSON.php

  1. [{
  2. "Name":"Alfreds Futterkiste",
  3. "City":"Berlin",
  4. "Country":"Germany"
  5. },{
  6. "Name":"Berglunds snabbköp",
  7. "City":"Luleå",
  8. "Country":"Sweden"
  9. },{
  10. "Name":"Centro comercial Moctezuma",
  11. "City":"México D.F.",
  12. "Country":"Mexico"
  13. },{
  14. "Name":"Ernst Handel",
  15. "City":"Graz",
  16. "Country":"Austria"
  17. },{
  18. "Name":"FISSA Fabrica Inter. Salchichas S.A.",
  19. "City":"Madrid",
  20. "Country":"Spain"
  21. },{
  22. "Name":"Galería del gastrónomo",
  23. "City":"Barcelona",
  24. "Country":"Spain"
  25. },{
  26. "Name":"Island Trading",
  27. "City":"Cowes",
  28. "Country":"UK"
  29. },{
  30. "Name":"Königlich Essen",
  31. "City":"Brandenburg",
  32. "Country":"Germany"
  33. },{
  34. "Name":"Laughing Bacchus Wine Cellars",
  35. "City":"Vancouver",
  36. "Country":"Canada"
  37. },{
  38. "Name":"Magazzini Alimentari Riuniti",
  39. "City":"Bergamo",
  40. "Country":"Italy"
  41. },{
  42. "Name":"North/South",
  43. "City":"London",
  44. "Country":"UK"
  45. },{
  46. "Name":"Paris spécialités",
  47. "City":"Paris",
  48. "Country":"France"
  49. },{
  50. "Name":"Rattlesnake Canyon Grocery",
  51. "City":"Albuquerque",
  52. "Country":"USA"
  53. },{
  54. "Name":"Simons bistro",
  55. "City":"København",
  56. "Country":"Denmark"
  57. },{
  58. "Name":"The Big Cheese",
  59. "City":"Portland",
  60. "Country":"USA"
  61. },{
  62. "Name":"Vaffeljernet",
  63. "City":"Århus",
  64. "Country":"Denmark"
  65. },{
  66. "Name":"Wolski Zajazd",
  67. "City":"Warszawa",
  68. "Country":"Poland"
  69. }]
 
 

AngularJS $http

  1. AngularJS $http 是一个用于读取web服务器上数据的服务。
  2. $http.get(url)是用于读取服务器数据的函数。
 
  1. <div ng-app="myApp" ng-controller="customersCtrl">
  3. <ul>
  4. <li ng-repeat="x in names">
  5. {{ x.Name+', '+ x.Country}}
  6. </li>
  7. </ul>
  9. </div>
  11. <script>
  12. var app = angular.module('myApp',[]);
  13. app.controller('customersCtrl',function($scope,$http){
  14. $http.get("Customers_JSON.php")
  15. .success(function(response){$scope.names = response.records;});
  16. });
  17. </script>

应用解析:

注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上。

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

当从服务端载入 JSON 数据时，$scope.names 变为一个数组。

 
魔芋练习：
 
其中，test.php 文件内容为：
  1. {"records":[{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},{"Name":"Around the Horn","City":"London","Country":"UK"},{"Name":"B's Beverages","City":"London","Country":"UK"},{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},{"Name":"Bon app'","City":"Marseille","Country":"France"},{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}]}
 
demo.html内容为：
 
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="renderer" content="webkit">
  7. <!--360,以webkit内核进行渲染-->
  8. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  9. <!--以最新内核进行渲染。-->
  10. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  11. <!--百度禁止转码-->
  12. <title>moyu demo</title>
  13. <meta name="keywords" content="demo 测试 魔芋">
  14. <meta name="description" content="魔芋的测试示例">
  15. <meta name="robots" content="index,follow">
  16. <!--定义网页搜索引擎索引方式-->
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  19. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  20. <style>
  22. </style>
  23. </head>
  25. <body>
  26. <div ng-app="myApp" ng-controller="customersCtrl">
  27. <ul>
  28. <li ng-repeat="x in names">
  29. {{ x.Name+', '+ x.Country}}
  30. </li>
  31. </ul>
  32. </div>
  33. <script>
  34. var app = angular.module('myApp',[]);
  35. app.controller('customersCtrl',function($scope, $http){
  36. $http.get("test.php")
  37. .success(function(response){
  38. $scope.names = response.records;
  39. });
  40. });
  41. </script>
  42. </body>
  44. </html>
 
结果：
 
 
 
 
 
 
 
 
 
 
 
**

【08】AngularJS XMLHttpRequest的更多相关文章

  1. SSAS系列——【08】多维数据（程序展现Cube）

    原文:SSAS系列--[08]多维数据(程序展现Cube) 1.引用DLL? 按照之前安装的MS SQLServer的步骤安装完成后,发现在新建的项目中“Add Reference”时居然找不到Mic ...

  2. 【08】css sprite是什么,有什么优缺点

    [08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地 ...

  3. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  4. 【转】AngularJS的$resource

    $http $http服务是基于$q服务的,提供了promise封装,它接受一个配置对象参数,并返回一个promise对象.同时,它还提供了2个方法用来定义Promise回调:success 和 er ...

  5. 【转】AngularJS 取消对 HTML 片段的转义

    今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-b ...

  6. 【经验】Angularjs 中使用 layDate 日期控件

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...

  7. 【转】AngularJS路由和模板

    1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...

  8. 【经验】angularjs 实现带查找筛选功能的select下拉框

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...

  9. 【转】Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

随机推荐

  1. C# 简单实现直线方程，抛物线方程（转载）

    http://www.cnblogs.com/hsiang/archive/2017/01/17/6294864.html 本例子是简单的在WinForm程序中实现在坐标系中绘制直线方程,抛物线方程, ...

  2. J20170604-hm

    丸める   四舍五入 文字化け 乱码 わきまえる 弁える 辨别,识相 御構い 张罗,招待,款待 お構いなしに 不加考虑 しおり ブックマーク 书签 スタイルシート 样式表

  3. sql server使用维护计划定时备份完整数据库、差异数据库

    我配置的是: 一个月执行一次完整备份数据库,删除三个月前备份文件.每天执行一次差异备份,删除一个月钱备份文件. 1.管理-维护计划   右键-新建维护计划 2.创建子计划 3.分别配置作业计划属性(执 ...

  4. poj Find a multiple【鸽巢原理】

    参考:https://www.cnblogs.com/ACShiryu/archive/2011/08/09/poj2356.html 鸽巢原理??? 其实不用map但是习惯了就打的map 以下C-c ...

  5. redis的持久化的原理介绍和实现

    redis提供了持久化功能——RDB和AOF.通俗的讲就是将内存中的数据写入硬盘中. RDB一定时间取存储文件,AOF默认每秒去存储历史命令,官方建议两种方式同时使用 一.RDB(Redis Data ...

  6. [Usaco2018 Feb]Snow Boots

    Description 到冬天了,这意味着下雪了!从农舍到牛棚的路上有N块地砖,方便起见编号为1-N,第i块地砖上积了fi英尺的雪.在Farmer John的农舍的地窖中,总共有B双靴子,编号为1-B ...

  7. ViewPager(3)用viewpager实现tabhost

    1.示例 2.代码 2.1 TabViewPagerMain.java import android.graphics.drawable.Drawable; import android.os.Bun ...

  8. Python学习日记之记录

    列表 list=['1','2'] 元组 zoo=('1','2''3') 字典 d = {key1 : value1, key2 : value2 }

  9. Spring scheduled cron 表达式

    一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...

  10. UI绘图与信息、样式

    UI的绘图功能是在视图尺寸确定以后,将信息和样式绘制的过程: 给信息和样式的修改提供的最后的机会. UILabel 控制行段间距的终极代码. class LineSpaceLabel: UILabel ...