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 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
js实现图片放大展示效果
Aug 30 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
做一个有下拉功能的留言版
2006/10/09 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
javascript检测是否联网的实现代码
2014/09/28 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python实现代码块儿折叠
2020/04/15 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
超市营业员求职简历的自我评价
2013/10/17 职场文书
社会保险接收函
2014/01/12 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
社区工作者演讲稿
2014/05/23 职场文书
趣味运动会开幕词
2015/01/28 职场文书
辞职信范文大全
2015/03/02 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
首席执行官观后感
2015/06/03 职场文书
python使用torch随机初始化参数
2022/03/22 Python