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 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 是一個用於讀取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資料的整理，後續繼續補充，希望能協助有需要的朋友。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
