AngularJS XMLHttpRequest
$http 是AngularJS 中的一個核心服務,用於讀取遠程服務器的數據。
讀取JSON 文件
以下是存儲在web服務器上的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 DF","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas SA","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 是一個用於讀取web服務器上數據的服務。
$http.get(url) 是用於讀取服務器數據的函數。
AngularJS 實例
<!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>運行結果:
應用解析:
注意:以上代碼的get 請求是本站的服務器,你不能直接拷貝到你本地運行,會存在跨域問題,解決辦法就是將
Customers_JSON.php 的數據拷貝到你自己的服務器上,附:PHP Ajax 跨域問題最佳解決方案。
AngularJS 應用通過ng-app 定義。應用在<div> 中執行。
ng-controller 指令設置了controller 對象名。
函數customersController 是一個標準的JavaScript 對象構造器。
控制器對像有一個屬性: $scope.names。
$http.get() 從web服務器上讀取靜態JSON 數據。
服務器數據文件為: http://www.runoob.com/try/angularjs/data/Customers_JSON.php。
當從服務端載入JSON 數據時,$scope.names 變為一個數組。
注意:以上代碼也可以用於讀取數據庫數據。
以上就是對AngularJS XMLHttpRequest資料的整理,後續繼續補充,希望能幫助有需要的朋友。