AngularJS AJAX - $http
$http 是一个用于从远程服务器读取数据的 AngularJS 服务。
AngularJS $http
AngularJS 的 $http 服务向服务器发送请求，并返回响应。
示例
向服务器发送一个简单的请求，并将结果显示在标题中
<div ng-app="myApp" ng-controller="myCtrl">
<p>今天的欢迎消息是：</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) {
// 第一个函数处理成功情况
$scope.content = response.data;
}, function(response) {
// 第二个函数处理错误情况
$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.php").then(function(response) {
$scope.myData = response.data.records;
});
});
</script>
亲自尝试 »
应用程序说明
该应用程序定义了 customersCtrl 控制器，它包含一个 $scope 对象和一个 $http 对象。
$http 是一个用于请求外部数据的 XMLHttpRequest 对象。
$http.get() 从 https://w3schools.org.cn/angular/customers.php 读取 JSON 数据。
成功后，控制器将在作用域中创建一个名为 myData 的属性，该属性包含来自服务器的 JSON 数据。
