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检测是否联网的实现代码
Sep 28 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
js实现简易计算器小功能
Nov 18 Javascript
vue使用echarts实现折线图
Mar 21 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
收集的php编写大型网站问题集
2007/03/06 PHP
php中explode与split的区别介绍
2012/10/03 PHP
深入PHP异步执行的详解
2013/06/03 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
DOM事件探秘篇
2017/02/15 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
Python import用法以及与from...import的区别
2015/05/28 Python
pandas重新生成索引的方法
2018/11/06 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python用requests实现http请求代码实例
2019/10/31 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
python实现交并比IOU教程
2020/04/16 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
个人授权委托书范本
2014/04/03 职场文书
资料员岗位职责
2015/02/10 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle