AngularJS AJAX - $http
$http ist ein AngularJS-Dienst zum Lesen von Daten von entfernten Servern.
AngularJS $http
Der AngularJS $http-Dienst stellt eine Anfrage an den Server und gibt eine Antwort zurück.
Beispiel
Stellen Sie eine einfache Anfrage an den Server und zeigen Sie das Ergebnis in einer Kopfzeile an:
<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>
Methoden
Das obige Beispiel verwendet die .getMethode des $http
Dienstes.
Die .get-Methode ist eine Abkürzungsmethode des $http-Dienstes. Es gibt mehrere Shortcut-Methoden:
.delete().get().head().jsonp().patch().post().put()
Die oben genannten Methoden sind alle Abkürzungen zum Aufrufen des $http-Dienstes:
Beispiel
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;
});
});
Das obige Beispiel führt den $http-Dienst mit einem Objekt als Argument aus. Das Objekt gibt die HTTP-Methode, die URL, die Vorgehensweise bei Erfolg und die Vorgehensweise bei Fehlschlag an.
Eigenschaften
Die Antwort vom Server ist ein Objekt mit diesen Eigenschaften:
.configdas Objekt, das zum Generieren der Anforderung verwendet wird..dataeine Zeichenfolge oder ein Objekt, das die Antwort vom Server trägt..headerseine Funktion zum Abrufen von Header-Informationen..statuseine Zahl, die den HTTP-Status definiert..statusTexteine Zeichenfolge, die den HTTP-Status definiert.
Beispiel
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;
});
});
Um Fehler zu behandeln, fügen Sie der .thenMethode eine weitere Funktion hinzu:
Beispiel
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";
});
});
JSON
Die Daten, die Sie aus der Antwort erhalten, sollten im JSON-Format vorliegen.
JSON ist eine großartige Möglichkeit, Daten zu transportieren, und es ist einfach in AngularJS oder jedem anderen JavaScript zu verwenden.
Beispiel: Auf dem Server haben wir eine Datei, die ein JSON-Objekt zurückgibt, das 15 Kunden enthält, die alle in ein Array namens records.
Klicken Sie hier, um sich das JSON-Objekt anzusehen.
Beispiel
Die ng-repeatDirektive ist perfekt, um ein Array zu durchlaufen:
<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>
Anwendung erklärt:
Die Anwendung definiert den customersCtrlController mit einem
$scopeund
$http-Objekt.
$httpist ein XMLHttpRequest-Objekt zum Anfordern externer Daten.
$http.get()liest JSON-Daten von
https://www.w3schools.com/angular/customers.php .
Bei Erfolg erstellt der Controller im Geltungsbereich eine Eigenschaft myDatamit JSON-Daten vom Server.