AngularJS Ajax详解及示例代码


Posted in Javascript onAugust 17, 2016

AngularJS提供$http控制,可以作为一项服务从服务器读取数据。服务器可以使一个数据库调用来获取记录。 AngularJS需要JSON格式的数据。一旦数据准备好,$http可以用以下面的方式从服务器得到数据。

function studentController($scope,$http) {
var url="data.txt";
  $http.get(url).success( function(response) {
              $scope.students = response; 
            });
}

在这里,data.txt中包含的学生记录。 $http服务使Ajax调用和设置针对其学生的属性。 “学生”模型可以用来用来绘制 HTML 表格。

例子

data.txt

[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]

testAngularJS.html

<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
 border: 1px solid grey;
 border-collapse: collapse;
 padding: 5px;
}
table tr:nth-child(odd) {
 background-color: #f2f2f2;
}
table tr:nth-child(even) {
 background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table>
  <tr>
   <th>Name</th>
   <th>Roll No</th>
	 <th>Percentage</th>
  </tr>
  <tr ng-repeat="student in students">
   <td>{{ student.Name }}</td>
   <td>{{ student.RollNo }}</td>
	 <td>{{ student.Percentage }}</td>
  </tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url="data.txt";
  $http.get(url).success( function(response) {
              $scope.students = response;
            });
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

要运行这个例子,需要部署textAngularJS.html,data.txt到一个网络服务器。使用URL在Web浏览器中打开textAngularJS.html请求服务器。看到结果如下:

AngularJS Ajax详解及示例代码

以上就是AngularJS Ajax的基础资料整理,后续继续整理相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
AngularJS包括详解及示例代码
Aug 17 #Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 #Javascript
AngularJS表单详解及示例代码
Aug 17 #Javascript
AngularJS模块详解及示例代码
Aug 17 #Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 #Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 #Javascript
AngularJS表格详解及示例代码
Aug 17 #Javascript
You might like
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php中strtotime函数用法详解
2014/11/15 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python非递归全排列实现方法
2017/04/10 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
详解Python:面向对象编程
2019/04/10 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python 将Excel转Word的示例
2021/03/02 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
投资意向协议书
2015/01/29 职场文书
地道战观后感300字
2015/06/04 职场文书
招商银行工作证明
2015/06/17 职场文书
2016新年感言
2015/08/03 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
90条交通安全宣传标语
2019/10/12 职场文书