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版)
May 03 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
js转html实体的方法
Sep 27 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
ES6中的Javascript解构的实现
Oct 30 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 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
工作交流会欢迎词
2014/01/12 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
新闻编辑求职信
2014/07/13 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
信用卡工资证明范本
2014/10/17 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript