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 mySuccess(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.
Пример
Директива 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 с
https://www.w3schools.com/angular/customers.php .
В случае успеха контроллер создает свойство myDataв области действия с данными JSON с сервера.