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 相关文章推荐
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
Express 配置HTML页面访问的实现
Nov 01 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文件读写操作之文件读取方法详解
2011/01/13 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
深入理解JavaScript中的浮点数
2016/05/18 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
js 函数性能比较方法
2020/08/24 Javascript
SVM基本概念及Python实现代码
2017/12/27 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
《荷花》教学反思
2014/04/16 职场文书
户外活动总结范文
2014/04/30 职场文书
超市店庆活动方案
2014/08/31 职场文书
2015年市场部工作总结
2015/04/30 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书