上一节:
下一节:

  AngularJS $http

  • 定义和使用

    $http 是AngularJS服务，用于从远程服务器读取数据。
    $http 服务向服务器发出请求，并返回响应。
    下面示例演示了向服务器发出一个简单的请求，并将结果显示在标题中： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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。
上一节:
下一节: