Neueste Web-Entwicklung Tutorials
 

AngularJS AJAX - $ http

❮ Zurück Weiter Kapitel ❯

$ http ist ein AngularJS Service für Daten von Remote - Servern zu lesen.

AngularJS $ http

Die AngularJS $http Service stellt eine Anfrage an den Server, und gibt eine Antwort.

Beispiel

Machen Sie eine einfache Anfrage an den Server, und zeigt das Ergebnis in einem Header:

<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>
Versuch es selber "

Methoden

Das obige Beispiel verwendet die .get Methode des $http Service.

Die .get Methode ist ein Shortcut-Methode des $ HTTP-Dienst. Es gibt mehrere Verknüpfungsmethoden:

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

Die oben genannten Methoden sind alle Verknüpfungen, die $ HTTP-Dienst aufrufen:

Beispiel

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;
    });
});
Versuch es selber "

Das obige Beispiel führt die $ HTTP-Dienst mit einem Objekt als Argument. Das Objekt wird unter Angabe der HTTP-Methode, die URL, was auf Erfolg zu tun, und was bei einem Fehler zu tun.

Eigenschaften

Die Antwort vom Server ist ein Objekt mit diesen Eigenschaften:

  • .config das Objekt verwendet , um die Anforderung zu generieren.
  • .data ein String oder ein Objekt, die Antwort vom Server trägt.
  • .headers eine Funktion zu verwenden Header - Informationen zu erhalten.
  • .status eine Zahl , die die HTTP - Status zu definieren.
  • .statusText einen String Definition des HTTP - Status.

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;
    });
});
Versuch es selber "

Um Fehler behandeln, fügen Sie eine weitere Funktionen zur .then Methode:

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";
    });
});
Versuch es selber "

JSON

Die Daten, die Sie aus der Antwort erhalten wird erwartet, dass im JSON-Format sein.

JSON ist eine gute Möglichkeit, Daten zu transportieren, und es ist einfach innerhalb AngularJS zu verwenden, oder jede andere JavaScript.

Beispiel: Auf dem Server haben wir eine Datei , die ein JSON - Objekt mit 15 Kunden zurückgibt, die alle in Reihe genannt gewickelt records .

Werfen Sie einen Blick auf das JSON - Objekt.

×

customers.php 

 {{Data | json}}

Beispiel

Die ng-repeat - Richtlinie ist ideal für durch eine Reihe Looping:

<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>
Versuch es selber "

Anwendung erklärt:

Die Anwendung definiert die customersCtrl Controller, mit einem $scope und $http Objekt.

$http ist ein XMLHttpRequest - Objekt für externe Daten anfordert.

$http.get() liest JSON - Daten aus http://www.w3ii.com/angular/customers.php .

Bei Erfolg schafft die Steuerung eine Eigenschaft, myData , in dem Umfang, mit JSON - Daten vom Server.


❮ Zurück Weiter Kapitel ❯