当前位置: 首页 > 编程笔记 >

在AngularJS中使用AJAX的方法

魏高邈
2023-03-14
本文向大家介绍在AngularJS中使用AJAX的方法,包括了在AngularJS中使用AJAX的方法的使用技巧和注意事项,需要的朋友参考一下

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控制器(而不是angularJS内置的$ http)中使用jQuery的$ .ajax()函数,以便以后可以从视图/模板访问$ scope值? 我有这个有点简约的angularJS控制器: 并且在视图中类似: 但是,视图中的加载时将为空,尽管控制器中的a告诉我$ scope.user随便填充。 现在,如果我将呼叫替换为一切正常,则可以正常工作。 我知道这是内置的

  • 问题内容: 我想在一个链中进行多个Ajax调用。但我也想在每次通话后按摩数据,然后再进行下一次通话。最后,当 所有 调用成功时,我想运行其他代码。 我正在为我的Ajax调用使用Angular $ http服务,并坚持这一点。 可能吗? 问题答案: 是的,由于AngularJS的服务是围绕PromiseAPI构建的,因此可以非常优雅地对其进行处理。基本上,对方法的调用会返回一个Promise,您可以

  • 我已经看过许多关于发出ajax请求的文章…

  • 本文向大家介绍AngularJS实现ajax请求的方法,包括了AngularJS实现ajax请求的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了AngularJS实现ajax请求的方法。分享给大家供大家参考,具体如下: 【HTML 代码】 【js代码 ajax.js】 【PHP代码 ajax.php】 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS

  • 本文向大家介绍浅谈关于angularJs中使用$.ajax的注意点,包括了浅谈关于angularJs中使用$.ajax的注意点的使用技巧和注意事项,需要的朋友参考一下 本文介绍了关于angularJs中使用$.ajax的注意点,分享给大家,具体如下 从技术上来讲,angular 与 jquery混用,是一件不太合适的,但是为什么这个话题争论至今依旧仁者见仁智者见智, 除了便捷度,还有可能就是jqu

  • 本文向大家介绍angularJS 中$scope方法使用指南,包括了angularJS 中$scope方法使用指南的使用技巧和注意事项,需要的朋友参考一下 以上就是关于angularJS 中$scope方法使用指南的全部内容了,希望大家能够喜欢。