Http AngularJS

AngularJS XMLHttpRequest

$http 是AngularJS中的一个核心服务，用于读取远程服务器的数据。

使用格式：

// 简单的GET请求，可以改为POST
$http({
　　　　method: 'GET',
　　　　url: '/someUrl'
}).then(function successCallback(response) {
　　　　　　　　// 请求成功执行代码
　　　　}, function errorCallback(response) {
　　　　　　　　// Esegui il codice in caso di fallimento della richiesta
});

简写方法

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文件：

{
　　　　"sites": [
　　　　　　　　{
　　　　　　　　　　　　"Name": "基础教程网",
　　　　　　　　　　　　"Url": "it.oldtoolbag.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 è un servizio utilizzato per leggere i dati su un server web.

$http.get(url) è una funzione utilizzata per leggere i dati del server.

Dichiarazione di abbandono (v1.5)

nella versione 1.5$http del success e error Il metodo è stato dismesso. Usa then Sostituzione del metodo.

Esempio di metodo generico

Esempio per versioni superiori a AngularJS 1.5

var app = angular.module('myApp', []);
　　　　
app.controller('siteCtrl', function($scope, $http) {
　　　　$http({
　　　　　　　　method: 'GET',
　　　　　　　　url: 'https://it.oldtoolbag.com/try/angularjs/data/sites.php'
　　　　}).then(function successCallback(response) {
　　　　　　　　　　　　$scope.names = response.data.sites;
　　　　　　　　}, function errorCallback(response) {
　　　　　　　　　　　　// Esegui il codice in caso di fallimento della richiesta
　　　　});
　　
});

Esempio di metodo abbreviato

Esempio per versioni superiori a AngularJS 1.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("https://it.oldtoolbag.com/run/angularjs/data/sites.php")
　　.then(function response {$scope.names = response.data.sites;});
});</script>

Esempio per versioni inferiori a AngularJS 1.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("https://it.oldtoolbag.com/try/angularjs/data/sites.php")
　　.success(function (response) {$scope.names = response.sites;});
});
</script>

Analisi dell'applicazione:

Attenzione: La richiesta GET del codice sopra è del server del nostro sito, non puoi copiarla direttamente per eseguire localmente, ci saranno problemi di origine diversa, la soluzione è copiare i dati di Customers_JSON.php sul tuo server personale.

L'applicazione AngularJS attraverso ng-app definito. Eseguito all'interno di <div>.

ng-controller L'istruzione ha impostato controller oggetto nome.

funzione customersController È uno standard JavaScript Costruttore dell'oggetto.

L'oggetto del controller ha un attributo: $scope.names.

$http.get() Leggi dati statici dal server web 　Dati JSON.

Il file dei dati del server è:　https://it.oldtoolbag.com/run/angularjs/data/sites.php.

Quando si caricano i dati JSON dal server$scope.names Diventa un array.