AngularJS XMLHttpRequest

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

读取 JSON 文件

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

{
"records": [
{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "Mxico D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquera",
"City": "Mxico 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 pre et fils",
"City": "Strasbourg",
"Country": "France"
},
{
"Name": "Blido 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": "Mxico D.F.",
"Country": "Mexico"
},
{
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
},
{
"Name": "Comrcio Mineiro",
"City": "So Paulo",
"Country": "Brazil"
}
]
}

 

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 type="text/javascript" src="js/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("js/text.json")
.success(function(response) {$scope.names = response.records;});
});
</script>

结果:

  • Alfreds Futterkiste, Germany
  • Ana Trujillo Emparedados y helados, Mexico
  • Antonio Moreno Taquera, Mexico
  • Around the Horn, UK
  • B's Beverages, UK
  • Berglunds snabbk枚p, Sweden
  • Blauer See Delikatessen, Germany
  • Blondel pre et fils, France
  • Blido Comidas preparadas, Spain
  • Bon app', France
  • Bottom-Dollar Marketse, Canada
  • Cactus Comidas para llevar, Argentina
  • Centro comercial Moctezuma, Mexico
  • Chop-suey Chinese, Switzerland
  • Comrcio Mineiro, Brazil   

应用解析:

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

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

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

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

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

服务器数据文件为:  我这儿是写了text.json。

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

 注:以上代码也可以用于读取数据库数据。

转载地址:http://www.runoob.com/angularjs/angularjs-http.html


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366055.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Hazelcast发布和订阅

几周前&#xff0c;我写了一篇有关Hazelcast入门的博客&#xff0c;描述了创建分布式地图&#xff0c;列表和队列是多么简单。 当时我提到Hazelcast还能做很多其他事情。 该博客快速浏览了Hazelcast的另一个功能&#xff1a;基于Publish / Subscribe模式的广播消息系统。 这采用…

接口自动化测试持续集成--Soapui接口功能测试参数化

按照自动化测试分层实现的原理&#xff0c;每一层的脚本实现都要进行参数化&#xff0c;自动化的目标就是要实现脚本代码与测试数据分离。当测试数据进行调整的时候不会对脚本的实现带来震荡&#xff0c;从而提高脚本的稳定性与灵活度&#xff0c;降低脚本的维护成本。Soapui最…

linux的tcpdump命令详解,tcpdump命令

tcpdump命令是一款sniffer工具&#xff0c;它可以打印所有经过网络接口的数据包的头信息&#xff0c;也可以使用-w选项将数据包保存到文件中&#xff0c;方便以后分析。语法tcpdump(选项)选项-a&#xff1a;尝试将网络和广播地址转换成名称&#xff1b;-c&#xff1a;收到指定的…

Codeforces 1027E Inverse Coloring 【DP】

Codeforces 1027E Inverse Coloring 题目链接 1 #include<bits/stdc.h>2 using namespace std;3 #define N 10104 #define LL long long5 #define Mod 9982443536 int n,k;7 LL dp[N][N],ans0;8 LL sum[N][N];9 int main(){ 10 cin>>n>>k; 11 dp[0][…

合并远程仓库到本地_git远程仓库创建和合并

上周发了一个张佳波小朋友关于git的文章&#xff0c;马上就更多小朋友的回馈。其中周玉涛同志发来了自己对于git之前问题的一些理解和解决方法&#xff0c;希望能帮助更多人解决问题。为了保证周玉涛同学提供材料的完整性&#xff0c;以下将他原文和图片发出&#xff0c;不做其…

swfobject.js视频播放插件

在网页中经常会用到视频播放的功能&#xff0c;下面介绍一下swfobject.js的视频播放应用&#xff1a;html代码结构&#xff1a; <div id"video_content"></div> css样式结构&#xff1a; body{background: #003368}#video_content{width:600px;height:40…

项目学生:JPA标准查询

这是Project Student的一部分。 其他职位包括带有Jersey的Webservice Client&#xff0c;带有Jersey的 Webservice Server &#xff0c; 业务层 &#xff0c; 具有Spring Data的持久性 &#xff0c;分片集成测试数据和Webservice Integration 。 我们已经介绍了CRUD的基本操作…

linux 广播命令,Linux基础命令---ping

pingping指令可以发送ICMP请求到目标地址&#xff0c;如果网络功能正常&#xff0c;目标主机会给出回应信息。ping使用ICMP协议强制发送ECHO_REQUEST报文到目标主机&#xff0c;从主机或网关获取ICMP ECHO_RESPONSE。ECHO_REQUESTt数据报(‘pings’)有一个IP和ICMP报头&#xf…

第5章 Internet协议 [TCP/IP详解 卷1:协议]

IP是TCP/IP协议族中的核心协议。所有TCP、UDP、ICMP和IGMP数据都通过IP数据报传输。IP提供了一种尽力而为、无连接的数据报交付服务。“尽力而为”的含义是不保证IP数据报能成功到达目的地。任何可靠性必须由上层&#xff08;例如TCP&#xff09;提供。IPv4和IPv6都使用这种尽力…

【[SHOI2015]超能粒子炮·改】

就是运用\(Lucas\)推一个柿子 首先是前置芝士\(Lucas\)定理 \[C_{n}^{m}\%pC_{n/p}^{m/p}*C_{n\%p}^{m\%p}\%p\] 至于证明 我建议去问一下Lucas本人 至于这道题&#xff0c;我们要求的是这个柿子 \[\sum_{i0}^kC_{n}^i\%p\] 于是我们设\(f(n,k)\sum_{i0}^kC_{n}^i\) 我们就可以…

Spring REST:异常处理卷。 3

这是该系列中有关Spring REST异常处理的最后一篇文章。 最后&#xff0c;这次我将讨论在表单处理期间可能发生的REST异常的处理。 因此&#xff0c;在本教程中&#xff0c;您将看到与REST&#xff0c;表单和异常处理有关的所有内容。 客户端呢&#xff1f; jQuery将用于反映RES…

centos6安装mysql并远程连接_Ubantu下MySQL安装、部署和远程连接

系统阿里云 ubantu 16.04MySQL 5.0/8.0连接工具 Navicat Premium安装MySQL1、MySQL 5.0直接使用apt命令安装sudo apt install mysql-server输入密码完成安装。安装完mysql-server后&#xff0c;mysql-client就带了&#xff0c;无需单独安装安装成功后输入如下命令检查数据库状态…

linux强制用户改密码,如何在Linux中强制用户在下次登录时更改密码?

由于安全方面的考虑&#xff0c;系统中的用户需要定期更新其密码。在本文中&#xff0c;我们将看到如何强制用户下次登录系统时更改其密码。列出用户首先让我们看一下系统中可用的用户。$ cut -d: -f1 /etc/passwd运行上面的代码给我们以下结果-mailnewsuucpproxywww-databacku…

C# 键盘钩子

C# 键盘钩子 1、键盘钩子&#xff1a; 通过代码将键盘的事件屏蔽掉&#xff0c;达到锁屏的效果。&#xff08;参考地址&#xff1a;https://zhidao.baidu.com/question/135132386108196965.html&#xff09; 2、代码如下&#xff1a; public class Hook : IDisposable{public d…

js中字符串和数组的使用

函数&#xff1a; 函数在调用的时候&#xff0c;会形成一个私有作用域&#xff0c;内部的变量不会被外面访问&#xff0c;这种保护机制叫闭包。这就意味着函数调用完毕&#xff0c;这个函数形成的栈内存会被销毁。 但有时候我们不希望他被销毁。 函数归属谁跟它在哪调用没有关…

Spring REST:异常处理卷。 1个

目录 Spring REST&#xff1a;异常处理卷。 1个 Spring REST&#xff1a;异常处理卷。 2 Spring REST&#xff1a;异常处理卷。 3 大家好&#xff0c;是时候继续在我的博客中发布新文章了。 因此&#xff0c;我很高兴地宣布&#xff0c;我计划编写一系列技术文章。 在当前文…

vue/cli3 配置vux

安装各插件 试过 安装“必须安装”的部分亦可 1、安装vuex npm install vuex --save-dev 2、在项目里面安装vux【必须安装】 npm install vux --save 3、安装vux-loader【必须安装】 npm install vux-loader --save-dev 4、安装less-loader&#xff08;这个是用以正确编译less源…

鼠标右键 移动选定的文件夹到指定位置_怎么把电脑桌面上的文件移动到更加安全的地方...

我们在使用电脑的时候习惯于把各种文档以及其他文件资料随手保存到电脑桌面上&#xff0c;这样操作可以方便以后对这些文档和文件资料的使用、管理&#xff0c;但是由于默认状态下桌面文件位于C盘中&#xff0c;这些文件资料不仅会占用掉C盘的很大的存储空间&#xff0c;并且日…

非常精简的Linux线程池实现(一)——使用互斥锁和条件变量

线程池的含义跟它的名字一样&#xff0c;就是一个由许多线程组成的池子。 有了线程池&#xff0c;在程序中使用多线程变得简单。我们不用再自己去操心线程的创建、撤销、管理问题&#xff0c;有什么要消耗大量CPU时间的任务通通直接扔到线程池里就好了&#xff0c;然后我们的主…

linux vim 执行shell命令行,Linux中vim和shell

在Linux系统中一切皆文件&#xff0c;配置服务其实就是在修改其配置文件的参数&#xff0c;而在日常文件中肯定少不了的就是编辑文档&#xff0c;这就离不开vim&#xff0c;而vim之所以能够得到广大厂商的青睐与用户的认可&#xff0c;原因在于vim编辑器中有三种模式&#xff1…