AngularJS $http

  • 定义和使用

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