Najnowsze tutoriale tworzenie stron internetowych
 

AngularJS AJAX - $ http

❮ Poprzedni Następny Rozdział ❯

$ http jest angularjs serwis dla odczytu danych z serwerów zdalnych.

Angularjs $ http

Angularjs $http serwis wysyła żądanie do serwera i zwraca odpowiedź.

Przykład

Zrób prosty żądanie do serwera i wyświetla wynik w nagłówku:

<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>
Spróbuj sam "

metody

Powyższy przykład używa .get sposobu $http usługi.

Metoda .get to metoda skrótu usługi $ http. Istnieje kilka metod skrótów:

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

Metody powyżej są wszystkie skróty z wywołaniem usługi $ http:

Przykład

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;
    });
});
Spróbuj sam "

Powyższy przykład wykonuje usługi HTTP $ z obiektu jako argument. Celem jest określenie metody HTTP, adres URL, co zrobić w przypadku powodzenia, i co robić w przypadku niepowodzenia.

Nieruchomości

Odpowiedź z serwera jest obiektem z tymi właściwościami:

  • .config przedmiot używany do generowania żądania.
  • .data ciągiem znaków, lub obiekt, niosąc odpowiedzi z serwera.
  • .headers funkcję użyć, aby uzyskać informacje nagłówka.
  • .status liczbę określającą status HTTP.
  • .statusText ciąg określenia statusu HTTP.

Przykład

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;
    });
});
Spróbuj sam "

Aby obsłużyć błędy, dodać jeden więcej funkcji do .then metody:

Przykład

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";
    });
});
Spróbuj sam "

JSON

Oczekuje się, że dane można uzyskać z reakcji być w formacie JSON.

JSON jest świetnym sposobem transportowania danych i jest łatwy w użyciu ciągu angularjs lub inny JavaScript.

Przykład: Na serwerze mamy plik, który zwraca obiekt JSON zawierający 15 klientów, a wszystko zapakowane w tablicy o nazwie records .

Spójrz na obiekt JSON.

×

customers.php 

 {{Danych | json}}

Przykład

ng-repeat dyrektywa jest idealny do pętli za pośrednictwem tablicy:

<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>
Spróbuj sam "

Zastosowanie wyjaśnił:

Aplikacja definiuje customersCtrl kontrolera, z $scope i $http obiektu.

$http jest obiekt XMLHttpRequest do żądania danych zewnętrznych.

$http.get() odczytuje dane JSON z http://www.w3ii.com/angular/customers.php .

W przypadku powodzenia, kontroler tworzy własność, myData , w zakresie, wraz z danymi JSON z serwera.


❮ Poprzedni Następny Rozdział ❯