【08】AngularJS XMLHttpRequest
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
读取 JSON 文件
以下是存储在web服务器上的 JSON 文件:
Customers_JSON.php
[{
"Name":"Alfreds Futterkiste",
"City":"Berlin",
"Country":"Germany"
},{
"Name":"Berglunds snabbköp",
"City":"Luleå",
"Country":"Sweden"
},{
"Name":"Centro comercial Moctezuma",
"City":"México D.F.",
"Country":"Mexico"
},{
"Name":"Ernst Handel",
"City":"Graz",
"Country":"Austria"
},{
"Name":"FISSA Fabrica Inter. Salchichas S.A.",
"City":"Madrid",
"Country":"Spain"
},{
"Name":"Galería del gastrónomo",
"City":"Barcelona",
"Country":"Spain"
},{
"Name":"Island Trading",
"City":"Cowes",
"Country":"UK"
},{
"Name":"Königlich Essen",
"City":"Brandenburg",
"Country":"Germany"
},{
"Name":"Laughing Bacchus Wine Cellars",
"City":"Vancouver",
"Country":"Canada"
},{
"Name":"Magazzini Alimentari Riuniti",
"City":"Bergamo",
"Country":"Italy"
},{
"Name":"North/South",
"City":"London",
"Country":"UK"
},{
"Name":"Paris spécialités",
"City":"Paris",
"Country":"France"
},{
"Name":"Rattlesnake Canyon Grocery",
"City":"Albuquerque",
"Country":"USA"
},{
"Name":"Simons bistro",
"City":"København",
"Country":"Denmark"
},{
"Name":"The Big Cheese",
"City":"Portland",
"Country":"USA"
},{
"Name":"Vaffeljernet",
"City":"Århus",
"Country":"Denmark"
},{
"Name":"Wolski Zajazd",
"City":"Warszawa",
"Country":"Poland"
}]
AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url)是用于读取服务器数据的函数。
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name+', '+ x.Country}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$http){
$http.get("Customers_JSON.php")
.success(function(response){$scope.names = response.records;});
});
</script>
应用解析:
注意:以上代码的 get 请求是本站的服务器,你不能直接拷贝到你本地运行,会存在跨域问题,解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上。
AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。
ng-controller 指令设置了 controller 对象 名。
函数 customersController 是一个标准的 JavaScript 对象构造器。
控制器对象有一个属性: $scope.names。
$http.get() 从web服务器上读取静态 JSON 数据。
当从服务端载入 JSON 数据时,$scope.names 变为一个数组。
{"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"}]}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<!--360,以webkit内核进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!--以最新内核进行渲染。-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--百度禁止转码-->
<title>moyu demo</title>
<meta name="keywords" content="demo 测试 魔芋">
<meta name="description" content="魔芋的测试示例">
<meta name="robots" content="index,follow">
<!--定义网页搜索引擎索引方式-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<style>
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name+', '+ x.Country}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope, $http){
$http.get("test.php")
.success(function(response){
$scope.names = response.records;
});
});
</script>
</body>
</html>
【08】AngularJS XMLHttpRequest的更多相关文章
- SSAS系列——【08】多维数据(程序展现Cube)
原文:SSAS系列--[08]多维数据(程序展现Cube) 1.引用DLL? 按照之前安装的MS SQLServer的步骤安装完成后,发现在新建的项目中“Add Reference”时居然找不到Mic ...
- 【08】css sprite是什么,有什么优缺点
[08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地 ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- 【转】AngularJS的$resource
$http $http服务是基于$q服务的,提供了promise封装,它接受一个配置对象参数,并返回一个promise对象.同时,它还提供了2个方法用来定义Promise回调:success 和 er ...
- 【转】AngularJS 取消对 HTML 片段的转义
今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-b ...
- 【经验】Angularjs 中使用 layDate 日期控件
layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...
- 【转】AngularJS路由和模板
1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...
- 【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
随机推荐
- 昆石VOS3000_2.1.2.0完整安装包及安装脚本
安装包下载地址 http://www.51voip.org/post/57.html 安装教程: 上传安装包 ·给整个目录授权 chmod 777 /root/vosintsall 1.安装前准备 首 ...
- 10.16NOIP模拟赛
/* 我是一个大sb */ #include<iostream> #include<cstdio> #include<cstring> #include<qu ...
- Nginx(二) 反向代理&负载均衡
1.反向代理 当我们请求一个网站时,nginx会决定由哪台服务器提供服务,就是反向代理. nginx只做请求的转发,后台有多个tomcat服务器提供服务,nginx的功能就是把请求转发给后面的服务器, ...
- (斯特林公式)51NOD 1058 N的阶乘的长度
输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. Input 输入N(1 <= N <= 10^6) Output 输出N的阶乘的长度 Input示例 6 Out ...
- JAXB解析xml 的注解说明
1.将 xml 文件中的各个节点和属性信息创建对应的Java模型 2.在Java模型中的创建与 xml 文件对应的节点和属性需要用注解来表示@XmlRootElement 将一个Java类映射 ...
- DataGridView 动态绑定 CheckBox
下面演示如何在 DataGridView 中动态绑定 CheckBox: public class Test { /// <summary> /// 构造器 /// </summar ...
- Java使用 POI 操作Excel
Java中常见的用来操作 Excel 的方式有2种:JXL和POI.JXL只能对 Excel进行操作,且只支持到 Excel 95-2000的版本.而POI是Apache 的开源项目,由Java编写的 ...
- [ CodeForces 1059 C ] Sequence Transformation
\(\\\) \(Description\) 你现在有大小为\(N\)的一个数集,数字分别为 \(1,2,3,...N\) ,进行\(N\)轮一下操作: 输出当前数集内所有数的\(GCD\) 从数集中 ...
- [ CCO 2015 ] Artskjid
\(\\\) \(Description\) \(N\)个点\(M\)条边的有向图,求从\(0\)号节点出发,\(N-1\)号节点结束,且图中每个点至多经过一次的最长路. \(N\in[2,18]\) ...
- Java提要
一.四种权限修饰符 1.访问控制修饰符 作用: 用于控制被修饰变量.方法.类的可见范围. public 的访问级别是最高的,其次是 protected.默认和 private. 成员变量和成员方法可以 ...