在AngularJS中使用AJAX的方法


Posted in Javascript onJune 17, 2015

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的方法

Javascript 相关文章推荐
javascript常见用法总结
May 22 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
js实现自定义路由
Feb 04 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 #Javascript
AngularJS的表单使用详解
Jun 17 #Javascript
举例讲解AngularJS中的模块
Jun 17 #Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 #Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 #Javascript
JavaScript AOP编程实例
Jun 16 #Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 #Javascript
You might like
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
javascript some()函数用法详解
2014/11/13 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python一键去抖音视频水印工具
2018/09/14 Python
django 自定义过滤器的实现
2019/02/26 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
中华美德颂演讲稿
2014/05/20 职场文书
统计专业自荐书
2014/07/06 职场文书
个人租房协议书样本
2014/10/01 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
创业计划书之游泳馆
2019/09/16 职场文书