在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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
vue内置指令详解
Apr 03 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
原生js实现俄罗斯方块
Oct 20 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
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
js获取视频时长代码
2014/04/10 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python 获取项目根路径的代码
2019/09/27 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
软件测试企业面试试卷
2016/07/13 面试题
年度考核自我评价
2014/01/25 职场文书
志愿者服务感言
2014/02/27 职场文书
消防验收申请报告
2015/05/15 职场文书
幼儿园见习总结
2015/06/23 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
Python几种酷炫的进度条的方式
2022/04/11 Python