AngularJS $http详解

作者 : 慕源网 本文共1574个字,预计阅读时间需要4分钟 发布时间: 2022-04-29 共244人阅读

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

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录