AngularJS AJAX - $http

$http jest usługą AngularJS, używaną do odczytywania danych z serwerów zdalnych.

AngularJS $http

AngularJS $http Usługa wysyła żądanie do serwera i zwraca odpowiedź.

实例

Wysyłanie prostego żądania do serwera i wyświetlanie wyniku 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 $http usługi .get Metoda.

Metoda .get jest szybkim sposobem usługi $http. Istnieją następujące szybkie metody:

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

Powyższe metody są szybkimi sposobami wywołania usługi $http:

实例

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;
  });
});

Spróbuj sam

Powyższy przykład używa obiektu jako parametru do wykonania usługi $http. Obiekt określa metodę HTTP, URL, operację wykonywaną przy sukcesie oraz operację wykonywaną przy błędzie.

Atrybut

Odpowiedź z serwera jest obiektem o następujących atrybutach:

  • .config Obiekt używany do generowania żądań
  • .data Ciąg lub obiekt, przenoszący odpowiedź z serwera
  • .headers The function used to obtain header information
  • .status Define the numeric value of HTTP status
  • .statusText Define the string of HTTP status

实例

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

To handle errors, send to .then Add a function to the method:

实例

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

The data obtained from the response should be in JSON format.

JSON is an excellent way to transmit data and is easy to use in AngularJS or any other JavaScript.

For example, we have a file on the server that returns a JSON object containing 15 customers, all wrapped in a name called records in the array.

Please click here to view the JSON object.

实例

The ng-repeat directive is perfect for looping through an 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>

Spróbuj sam

Opis aplikacji:

Ta aplikacja definiuje customersCtrl kontroler, który ma zakres i http obiektu.

$http jest Obiekt XMLHttpRequest, używane do żądania zewnętrznych danych.

$http.get() Przeczytaj z https://www.codew3c.com/angular/customers.php Dane JSON.

Po pomyślnym zakończeniu, kontroler tworzy atrybut w zakresie myData, które zawierają dane JSON z serwera.