AngularJS Http

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

使用格式：

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

简写方法

POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

此外还有以下简写方法：

• $http.get
• $http.head
• $http.post
• $http.put
• $http.delete
• $http.jsonp
• $http.patch

更详细内容可参见：https://docs.angularjs.org/api/ng/service/$http

读取 JSON 文件

以下是存储在web服务器上的 JSON 文件：

http:/codes?undefined&lan=angularjs/data/sites

{
  "sites": [
    {
    "Name": "JavaScript中文网",
    "Url": "www.javascriptcn.com",
    "Country": "CN"
    },
    {
    "Name": "Google",
    "Url": "www.google.com",
    "Country": "USA"
    },
    {
    "Name": "Facebook",
    "Url": "www.facebook.com",
    "Country": "USA"
    },
    {
    "Name": "微博",
    "Url": "www.weibo.com",
    "Country": "CN"
    }
  ]
}

AngularJS $http

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

通用方法实例

AngularJS1.5 以上版本 - 实例

var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http({
    method: 'GET',
    url: 'https:/codes?undefined&lan=angularjs/data/sites'
  }).then(function successCallback(response) {
    $scope.names = response.data.sites;
  }, function errorCallback(response) {
// 请求失败执行代码
  });
});

简写方法实例

AngularJS1.5 以上版本 - 实例

<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http:/codes?undefined&lan=angularjs/data/sites")
  .then(function (response) {$scope.names = response.data.sites;});
});
</script>

AngularJS1.5 以下版本 - 实例

<div ng-app="myApp" ng-controller="siteCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http:/codes?undefined&lan=angularjs/data/sites")
  .success(function (response) {$scope.names = response.sites;});
});
</script>