AngularJS Http
AngularJS XMLHttpRequest
$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://www.sharebody.com/try/angularjs/data/sites.asp
{
"sites": [
{
"Name": "教程",
"Url": "www.sharebody.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://www.sharebody.com/try/angularjs/data/sites.asp'
}).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://www.sharebody.com/try/angularjs/data/sites.asp")
.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://www.sharebody.com/try/angularjs/data/sites.asp")
.success(function (response) {$scope.names = response.sites;});
});
</script>
嘗試一下 »
應用解析:
注意：以上代碼的 get 請求是本站的服務器，你不能直接拷貝到你本地運行，會存在跨域問題，解決辦法就是將 Customers_JSON.asp 的數據拷貝到你自己的服務器上，附：PHP Ajax 跨域問題最佳解決方案。
AngularJS 應用通過 ng-app 定義。應用在 <div> 中執行。
ng-controller 指令設置了 controller 對象 名。
函數 customersController 是一個標准的 JavaScript 對象構造器。
控製器對象有一個屬性: $scope.names。
$http.get() 從web服務器上讀取靜態 JSON 數據。
服務器數據文件為： http://www.sharebody.com/try/angularjs/data/sites.asp。
當從服務端載入 JSON 數據時，$scope.names 變為一個數組。
| 以上代碼也可以用於讀取數據庫數據。 |