Gli ultimi tutorial di sviluppo web
 

AngularJS AJAX - $ http

❮ Precedente Successivo Capitolo ❯

$ HTTP è un servizio AngularJS per la lettura dei dati da server remoti.

AngularJS $ http

Il AngularJS $http servizio fa una richiesta al server, e restituisce una risposta.

Esempio

Fare una semplice richiesta al server, e visualizzare il risultato in un colpo di testa:

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>
Prova tu stesso "

metodi

L'esempio precedente utilizza il .get metodo $http servizio.

Il metodo .get è un metodo di collegamento del servizio di $ http. Ci sono diversi metodi di scelta rapida:

  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

I metodi di cui sopra sono tutti i collegamenti di chiamare il servizio di $ http:

Esempio

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "welcome.htm"
    }).then(function mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});
Prova tu stesso "

L'esempio precedente esegue il servizio http $ con un oggetto come argomento. L'oggetto viene specificando il metodo HTTP, l'URL, cosa fare in caso di successo, e cosa fare in caso di fallimento.

Proprietà

La risposta dal server è un oggetto con queste proprietà:

  • .config l'oggetto utilizzato per generare la richiesta.
  • .data una stringa o un oggetto, portando la risposta dal server.
  • .headers una funzione da utilizzare per ottenere informazioni di intestazione.
  • .status un numero che definisce lo stato HTTP.
  • .statusText una stringa che definisce lo stato HTTP.

Esempio

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.content = response.data;
        $scope.statuscode = response.status;
        $scope.statustext = response.statustext;
    });
});
Prova tu stesso "

Per gestire gli errori, aggiungere uno più funzioni al .then metodo:

Esempio

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("wrongfilename.htm")
    .then(function(response) {
        //First function handles success
        $scope.content = response.data;
    }, function(response) {
        //Second function handles error
        $scope.content = "Something went wrong";
    });
});
Prova tu stesso "

JSON

I dati si ottiene dalla risposta dovrebbe essere in formato JSON.

JSON è un ottimo modo di trasporto di dati, ed è facile da usare all'interno AngularJS, o qualsiasi altra JavaScript.

Esempio: Sul server abbiamo un file che restituisce un oggetto JSON contenente 15 clienti, il tutto avvolto in array chiamato records .

Date un'occhiata a l'oggetto JSON.

×

customers.php 

 {{Data | JSON}}

Esempio

Il ng-repeat direttiva è perfetto per il ciclo attraverso una serie:

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function(response) {
        $scope.myData = response.data.records;
    });
});
</script>
Prova tu stesso "

Applicazione ha spiegato:

L'applicazione definisce il customersCtrl controllore, con un $scope e $http oggetto.

$http è un oggetto XMLHttpRequest per la richiesta di dati esterni.

$http.get() legge i dati JSON da http://www.w3ii.com/angular/customers.php .

In caso di successo, il controllore crea una proprietà, myData , nel campo di applicazione, con i dati JSON dal server.


❮ Precedente Successivo Capitolo ❯