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 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
实例分析js事件循环机制
Dec 13 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
vue实现条件叠加搜索的解决方法
May 28 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简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
python中urllib模块用法实例详解
2014/11/19 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python实现最小二乘法线性拟合
2019/07/19 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
校领导推荐信
2013/11/01 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
校庆团日活动总结
2014/08/28 职场文书
详解python字符串驻留技术
2021/05/21 Python
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
linux下安装redis图文详细步骤
2021/12/04 Redis