在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 相关文章推荐
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
使用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
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
详解python 爬取12306验证码
2019/05/10 Python
利用python计算时间差(返回天数)
2019/09/07 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
回门宴父母答谢词
2014/01/26 职场文书
职工趣味运动会方案
2014/02/10 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014年创卫工作总结
2014/11/24 职场文书
自主招生英文自荐信
2015/03/25 职场文书
建房合同协议书
2016/03/21 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers