W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

AngularJS XMLHttpRequest



$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。


AngularJS $http

AngularJS $http 服务向服务器发出请求,并返回响应。

Example

向服务器发出一个简单的请求,并将结果显示在标题中:

<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>
尝试一下 >>

方法

以上实例使用 $http 服务的 .get 方法。

.get 方法是 $http 服务的简写。有几种简写方式:

  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

以上方法都是调用$http服务的简写方式:

Example

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "welcome.htm"
    }).then(function mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});
尝试一下 >>

上面的例子使用对象作为参数来执行$http服务。 该对象指定了HTTP方法,url,成功执行了什么以及失败时该怎么办。


属性

来自服务器的响应是具有以下属性的对象:

  • .config 用于生成请求的对象。
  • .data 一个字符串或一个对象,携带服务器的响应。
  • .headers 用于获取头信息的函数。
  • .status 定义HTTP状态的数字。
  • .statusText 定义HTTP状态的字符串。

Example

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 方法:

Example

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 中。

查看JSON对象

×

customers.php

{{data | json}}

Example

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() 读取 JSON 数据http://res.w3schools.wang/cate/angular/customers.php

成功后,控制器将在服务器中使用JSON数据在作用域创建一个属性 myData