AngularJS入門教程之 XMLHttpRequest實(shí)例講解

更新時(shí)間：2016年07月27日 16:18:46 投稿：lqh

本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關(guān)資料并提供實(shí)例代碼,有需要的小伙伴參考下

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)。

讀取 JSON 文件

以下是存儲(chǔ)在web服務(wù)器上的 JSON 文件：

http://www.runoob.com/try/angularjs/data/Customers_JSON.php

{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}

AngularJS $http

AngularJS $http 是一個(gè)用于讀取web服務(wù)器上數(shù)據(jù)的服務(wù)。

$http.get(url) 是用于讀取服務(wù)器數(shù)據(jù)的函數(shù)。

AngularJS 實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
 <li ng-repeat="x in names">
  {{ x.Name + ', ' + x.Country }}
 </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

運(yùn)行結(jié)果：