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 相关文章推荐
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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
基于jquery自定义图片热区效果
2012/07/21 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python的re模块正则表达式操作
2016/05/25 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
如何在python中实现随机选择
2019/11/02 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
django中ImageField的使用详解
2020/12/21 Python
如何编写python的daemon程序
2021/01/07 Python
交通文明倡议书
2014/05/16 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
2015年工程部工作总结
2015/04/30 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python