AngularJS $http详解-慕源网

AngularJS $http，AngularJS提供了一个名为ajax–$HTTP的控制服务，该服务负责读取远程服务器上的所有可用数据。数据大多需要采用JSON格式。这主要是因为在传输数据时，JSON是一种Amazon方法，而且在AngularJS、JavaScript等中使用JSON非常简单和轻松。

语法：

function studentController($scope,$https:) {
   var url = "data.txt";

   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

方法：有很多方法可以用来调用$HTTP服务

.post()
.get()
.head()
.jsonp()
.patch()
.delete()
.put()

属性：

.headers ：获取头信息（一个函数）。
.statusText：定义 HTTP 状态（字符串）。
.status：定义HTTP状态（A Number）。
.data：携带来自服务器的响应（一个字符串/一个对象）。
.config：生成请求（一个对象）。

示例：我们有文件 data.txt，其中将包含学生的记录。$http 服务将进行 ajax 调用。它将转移并设置对具有优先权的学生的响应。数据获取之后，将在HTML中绘制表格

data.txt文件：

[
   {
      "Name" : "Ronaldo",
      "Goals" : 128,
      "Ratio" : "69%"
   },
   {
      "Name" : "James",
      "Goals" : 007,
      "Ratio" : "70%"
   },
   {
      "Name" : "Ali",
      "Goals" : 786,
      "Ratio" : "99%"
   },
   {
      "Name" : "Lionel ",
      "Goals" : 210,
      "Ratio" : "100%"
   }
]

代码：

<!DOCTYPE html>
<html>

<head>
	<title>AngularJS AJAX - $http</title>
	<style>
		table, th, td {
					border: 1px #2E0854;
					border-collapse: collapse;
					padding: 5px;
				}
				
				table tr:nth-child(odd) {
					background-color: #F6ADCD;
				}
				
				table tr:nth-child(even) {
					background-color: #42C0FB;
				}
	</style>
	<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
	</script>
</head>
<body>
<center>
	<h1 style="color:green">GeeksforGeeks</h1>
	<h3>AJAX - $http</h>
	<div ng-app="" ng-controller="studentController">
		<table>
			<tr>
				<th>Name</th>
				<th>Goals</th>
				<th>Ratio</th>
			</tr>
			<tr ng-repeat="student in students">
				<td>{{ Player.Name }}</td>
				<td>{{ Player.Goals}}</td>
				<td>{{ Player.Ratio}}</td>
			</tr>
		</table>
	</div>
	<script>
			function studentController($scope, $http) {
						var url = "/data.txt";
			
						$http.get(url).then( function(response) {
						$scope.students = response.data;
						});
					}
	</script>
</center>
</body>

</html>

输出：

AngularJS $http详解

常见问题FAQ

慕源网普通

发表评论取消回复

常见问题FAQ

慕源网 普通

发表评论 取消回复

相关推荐

慕源网普通

发表评论取消回复