AngularJS $http
-
定义和使用
$http 是AngularJS服务,用于从远程服务器读取数据。$http 服务向服务器发出请求,并返回响应。下面示例演示了向服务器发出一个简单的请求,并将结果显示在标题中:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜鸟教程(cainiaoya.com)</title> <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>今天的最欢迎信息是:</p> <h3>{{ myWelcome }}</h3> </div> <p>$http服务请求服务器上的页面,并将响应设置为 "myWelcome" 变量的值。</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.html").then(function (response) { $scope.myWelcome = response.data; }); }); </script> </body> </html>
-
$http 请求方法
上面的示例使用 $http 服务的 .get 方法。.get 方法是 $http 服务的快捷方式之一,下面有几种快捷方式:- .delete()
- .get()
- .head()
- .jsonp()
- .patch()
- .post()
- .put()
上面的方法都是调用 $http 服务的所有快捷方式:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜鸟教程(cainiaoya.com)</title> <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>今天的最欢迎信息是:</p> <h3>{{ myWelcome }}</h3> </div> <p>$http服务请求服务器上的页面,并将响应设置为 "myWelcome" 变量的值。</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http({ method : "GET", url : "welcome.html" }).then(function mySuccess(response) { $scope.myWelcome = response.data; }, function myError(response) { $scope.myWelcome = response.statusText; }); }); </script> </body> </html>
上面的示例使用对象作为参数执行$http服务。该对象指定HTTP方法,URL,成功时要执行的操作以及失败时应执行的操作。
-
服务器的响应属性
下表描述了来自服务器的响应属性的对象:属性 描述 .config 用于生成请求的对象。 .data 包含服务器响应的字符串或对象。 .headers 用于获取标题信息的函数。 .status 一个定义HTTP状态的数字。 .statusText 一个定义HTTP状态的字符串。 下面示例演示了data,status和statusText属性的值:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜鸟教程(cainiaoya.com)</title> <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>Data : {{content}}</p> <p>Status : {{statuscode}}</p> <p>StatusText : {{statustext}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.html") .then(function(response) { $scope.content = response.data; $scope.statuscode = response.status; $scope.statustext = response.statusText; }); }); </script> </body> </html>
要处理错误,请在 .then 方法中添加一个功能:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜鸟教程(cainiaoya.com)</title> <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{ content }}</h1> </div> <p>$http服务在成功和失败时执行不同的功能。</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("wrongfilename.html") .then(function(response) { //第一个函数是处理成功 $scope.content = response.data; }, function(response) { //第二个函数是处理错误 $scope.content = "服务器请求出错了"; }); }); </script> </body> </html>
-
JSON
JSON 是一种传输数据的好方法,并且在AngularJS或任何其他JavaScript中都易于使用。下面示例演示了在服务器上,我们有一个文件,该文件返回一个JSON对象,该对象包含15个客户,所有客户都包装在称为records的数组中。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜鸟教程(cainiaoya.com)</title> <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in myData"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers.php").then(function(response) { $scope.myData = response.data.records; }); }); </script> </body> </html>
应用说明:- 该应用程序使用$scope和$http对象定义customersCtrl控制器。
- $http是一个XMLHttpRequest对象,用于请求外部数据。
- $http.get()从customers.php读取JSON数据。
- 成功后,控制器将使用来自服务器的JSON数据在范围内创建属性myData。