AngularJS AJAX – $http
$http je služba AngularJS pro čtení dat ze vzdálených serverů.
AngularJS $ http
Služba AngularJS $httpodešle požadavek na server a vrátí odpověď.
Příklad
Proveďte jednoduchý požadavek na server a zobrazte výsledek v záhlaví:
<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>
Metody
Výše uvedený příklad používá .getmetodu $http
služby.
Metoda .get je zkratková metoda služby $http. Existuje několik zkratkových metod:
.delete().get().head().jsonp().patch().post().put()
Výše uvedené metody jsou všechny zkratky pro volání služby $http:
Příklad
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;
});
});
Výše uvedený příklad spustí službu $http s objektem jako argumentem. Objekt určuje metodu HTTP, adresu URL, co dělat v případě úspěchu a co dělat v případě selhání.
Vlastnosti
Odpověď ze serveru je objekt s těmito vlastnostmi:
.configobjekt použitý ke generování požadavku..datařetězec nebo objekt nesoucí odpověď ze serveru..headersfunkce, kterou lze použít k získání informací v záhlaví..statusčíslo definující stav HTTP..statusTextřetězec definující stav HTTP.
Příklad
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;
});
});
Chcete-li ošetřit chyby, přidejte do metody ještě jednu funkci .then:
Příklad
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
Očekává se, že data, která získáte z odpovědi, budou ve formátu JSON.
JSON je skvělý způsob přenosu dat a snadno se používá v rámci AngularJS nebo jakéhokoli jiného JavaScriptu.
Příklad: Na serveru máme soubor, který vrací objekt JSON obsahující 15 zákazníků, všechny zabalené v poli s názvem records.
Klikněte sem a podívejte se na objekt JSON.
Příklad
Direktiva ng-repeatje ideální pro procházení polem:
<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>
Vysvětlení aplikace:
Aplikace definuje customersCtrlregulátor pomocí a
$scopea
$httpobjektu.
$httpje objekt XMLHttpRequest pro vyžádání externích dat.
$http.get()čte data JSON z
https://www.w3schools.com/angular/customers.php .
Po úspěchu vytvoří kontrolér vlastnost , myDatav rozsahu, s daty JSON ze serveru.