AngularJS AJAX - $http

$http è un servizio di AngularJS utilizzato per leggere dati da server remoti.

AngularJS $http

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

Esempio

Inviare una richiesta semplice al server e visualizzare il risultato nel titolo:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Il messaggio di benvenuto di oggi è:</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 personalmente

metodo

L'esempio sopra utilizza $http del servizio .get Metodo.

Il metodo .get è uno scorciatoia del servizio $http. Esistono diversi tipi di scorciatoie:

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

Questi metodi sopra menzionati sono scorci per chiamare il servizio $http:

Esempio

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

Prova personalmente

L'esempio sopra utilizza un oggetto come parametro per eseguire il servizio $http. L'oggetto specifica il metodo HTTP, l'URL, l'azione da eseguire con successo e l'azione da eseguire in caso di fallimento.

Proprietà

La risposta ricevuta dal server è un oggetto che ha le seguenti proprietà:

• .config Oggetto utilizzato per generare la richiesta
• .data Stringa o oggetto, che trasporta la risposta ricevuta dal server
• .headers La funzione per ottenere le informazioni di intestazione
• .status Definisci il numero dello stato HTTP
• .statusText Definisci la stringa dello 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 personalmente

Per gestire gli errori, vai a .then Aggiungi una funzione al metodo:

Esempio

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // Prima funzione gestisce il successo
    $scope.content = response.data;
  }, function(response) {
    // Seconda funzione gestisce gli errori
    $scope.content = "Qualcosa è andato storto";
  });
});

Prova personalmente

JSON

I dati ottenuti dalla risposta dovrebbero essere in formato JSON.

JSON è un ottimo modo per trasmettere dati e facile da utilizzare in AngularJS o in qualsiasi altro JavaScript.

Esempio: su un server abbiamo un file che restituisce un oggetto JSON contenente 15 clienti, tutti questi sono racchiusi in un nome records nell'array.

Clicca qui per visualizzare l'oggetto JSON.

Esempio

La direttiva ng-repeat è perfetta per iterare attraverso un array:

<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 personalmente

Descrizione dell'applicazione:

L'applicazione definisce customersCtrl controller, con scope e http oggetto.

$http è un Oggetto XMLHttpRequest, utilizzato per richiedere dati esterni.

$http.get() Letti da https://www.codew3c.com/angular/customers.php Dati JSON.

Dopo il successo, il controller crea un attributo nello scope myData, che include dati JSON provenienti dal server.