Последние учебники веб-разработки
 

AngularJS AJAX - $ HTTP

❮ Предыдущая Следующая Глава ❯

$ HTTP является AngularJS сервис для считывания данных с удаленных серверов.

AngularJS $ HTTP

AngularJS $http служба делает запрос на сервер и возвращает ответ.

пример

Сделать простой запрос на сервер, и отображать результат в заголовке:

<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>
Попробуй сам "

методы

В приведенном выше примере используется .get метод $http службы.

Метод .get представляет собой метод ярлык службы $ HTTP. Есть несколько способов быстрого доступа:

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

Методы выше все ярлыки вызова службы $ HTTP:

пример

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;
    });
});
Попробуй сам "

Приведенный выше пример выполняет службу HTTP $ с объектом в качестве аргумента. Объект задания метода HTTP, URL-адрес, что делать в случае успеха, и что делать в случае неудачи.

свойства

Ответ от сервера является объектом с этими свойствами:

  • .config объект , используемый для создания запроса.
  • .data строка, или объект, несущий ответ от сервера.
  • .headers функцию , чтобы использовать , чтобы получить информацию заголовка.
  • .status ряд , определяющий статус HTTP.
  • .statusText строку , определяющую статус HTTP.

пример

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;
    });
});
Попробуй сам "

Для обработки ошибок, добавьте еще одну функции к .then метода:

пример

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

Данные, которые вы получаете от ответа, как ожидается, будет в формате JSON.

JSON является отличным способом транспортировки данных, и она проста в использовании в пределах AngularJS, или любой другой JavaScript.

Пример: На сервере есть файл , который возвращает объект JSON , содержащий 15 клиентов, все завернутые в массиве называется records .

Посмотрите на объект JSON.

×

customers.php 

 {{Данные | }} JSON

пример

ng-repeat директивы идеально подходит для циклически массива:

<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>
Попробуй сам "

Применение объяснил:

Приложение определяет customersCtrl контроллер, с $scope и $http объекта.

$http является объектом XMLHttpRequest для запроса внешних данных.

$http.get() считывает данные в формате JSON из http://www.w3ii.com/angular/customers.php .

В случае успеха, контроллер создает свойство, myData , в объеме, с JSON данных с сервера.


❮ Предыдущая Следующая Глава ❯