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

2019-11-20 09:23:48

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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é)果：