Ultimele tutoriale de dezvoltare web
 

AngularJS AJAX - $ http

❮ Anterior Urmatorul capitol ❯

$ http este un serviciu AngularJS pentru citirea datelor de pe serverele de la distanță.

AngularJS $ http

AngularJS $http serviciu face o cerere la server, și returnează un răspuns.

Exemplu

Efectuați o simplă cerere la server, și va afișa rezultatul într-un antet:

<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>
Încearcă - l singur »

metode

Exemplul de mai sus utilizează .get metoda de $http serviciu.

Metoda .get este o metodă de comandă rapidă a serviciului $ http. Există mai multe metode de comenzi rapide:

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

Metodele de mai sus sunt toate comenzile rapide de apelare a serviciului $ http:

Exemplu

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;
    });
});
Încearcă - l singur »

Exemplul de mai sus execută serviciul de http $ cu un obiect ca argument. Obiectul este specificând metoda HTTP, URL-ul, ce să facă în caz de succes, și ce să facă în caz de eșec.

Proprietăți

Răspunsul de la server este un obiect cu aceste proprietăți:

  • .config obiectul folosit pentru a genera cerere.
  • .data un șir de caractere, sau un obiect, care transportă răspunsul de la server.
  • .headers o funcție de a utiliza pentru a obține informații de antet.
  • .status un număr care definește statutul de HTTP.
  • .statusText un șir de caractere care definește starea HTTP.

Exemplu

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;
    });
});
Încearcă - l singur »

Pentru a gestiona erori, adăugați mai multe funcții una la .then metoda:

Exemplu

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";
    });
});
Încearcă - l singur »

JSON

Datele pe care le obține de răspuns este de așteptat să fie în format JSON.

JSON este o modalitate foarte bună de transport de date, și este ușor de utilizat în cadrul AngularJS, sau orice alt JavaScript.

Exemplu: Pe server avem un fișier care returnează un obiect JSON care conține 15 clienți, toate învelite în matrice numite records .

Aruncati o privire la obiect JSON.

×

customers.php 

 {{Date | json}}

Exemplu

ng-repeat directivă este perfect pentru looping printr - o matrice:

<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>
Încearcă - l singur »

Aplicație a explicat:

Aplicația definește customersCtrl controler, cu un $scope de $http $scope și $http obiect.

$http este un obiect XMLHttpRequest pentru solicitarea de date externe.

$http. get() $http. get() citește date JSON din http://www.w3ii.com/angular/customers.php .

În caz de succes, operatorul creează o proprietate, myData , în domeniul de aplicare, cu date JSON de pe server.


❮ Anterior Urmatorul capitol ❯