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) {
// 第一个函数处理成功
$scope.content = response.data;
}, function(response) {
// 第二个函数处理错误
$scope.content = "Something went wrong";
});
});
亲自试一试 »
JSON
从响应中获得的数据应该是 JSON 格式的。
JSON 是一种很好的数据传输方式，在 AngularJS 或任何其他 JavaScript 中都很容易使用。
示例:在服务器上，我们有一个返回 JSON 对象的文件，该对象包含15个客户，所有客户都封装在名为 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>
亲自试一试 »
代码解析:
应用程序使用 $scope 和 $http 对象定义 CustomerCtrl 控制器。
$http 是用于请求外部数据的 XMLHttpRequest object 对象。
$http.get() 从 https://www.w3ccoo.com/angular/customers.php 中读取 JSON 数据。
成功后，控制器在作用域中创建一个属性 myData，其中包含来自服务器的 JSON 数据。
