AngularJS AJAX - $http
$http是一个 AngularJS 服务，用于从远程服务器读取数据。
AngularJS $http
AngularJS$http服务向服务器发出请求，并返回响应。
示例
向服务器发出一个简单的请求，并将结果显示在标头中：
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
</script>
亲自试一试 »
方法
上面的例子使用了.get的方法$http服务。
.get 方法是 $http 服务的快捷方法。有以下几种快捷方法：
.delete().get().head().jsonp().patch().post().put()
以上方法都是调用$http服务的快捷方式：
示例
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
亲自试一试 »
上面的示例使用一个对象作为参数来执行 $http 服务。该对象指定 HTTP 方法、URL、成功时执行的操作以及失败时执行的操作。
特性
来自服务器的响应是具有以下属性的对象：
.config用于生成请求的对象。.data一个字符串或一个对象，携带来自服务器的响应。.headers用于获取标头信息的函数。.status定义 HTTP 状态的数字。.statusText定义 HTTP 状态的字符串。
示例
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content = response.data;
$scope.statuscode = response.status;
$scope.statustext = response.statusText;
});
});
亲自试一试 »
要处理错误，请向.then方法：
示例
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("wrongfilename.htm")
.then(function(response) {
// First function handles success
$scope.content = response.data;
}, function(response) {
// Second function handles error
$scope.content = "Something went wrong";
});
});
亲自试一试 »
JSON
从响应中获取的数据预计为 JSON 格式。
JSON 是一种传输数据的好方法，并且很容易在 AngularJS 或任何其他 JavaScript 中使用。
示例：在服务器上，我们有一个文件返回一个包含 15 个客户的 JSON 对象，所有这些对象都包装在名为的数组中records。
示例
这个ng-repeat指令非常适合循环数组：
<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.html").then(function(response) {
$scope.myData = response.data.records;
});
});
</script>
亲自试一试 »
应用说明：
该应用程序定义了customersCtrl控制器，带有一个$scope和$http目的。
$http是一个XMLHttpRequest 对象用于请求外部数据。
$http.get()读JSON数据从https://www.91xjr.com/angular/customers.html。
成功后，控制器创建一个属性，myData，在范围内，包含来自服务器的 JSON 数据。