AngularJS AJAX - $http
$http is 'n AngularJS-diens vir die lees van data vanaf afgeleë bedieners.
AngularJS $http
Die AngularJS $http-diens rig 'n versoek aan die bediener en gee 'n antwoord terug.
Voorbeeld
Maak 'n eenvoudige versoek aan die bediener, en vertoon die resultaat in 'n kopskrif:
<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>
Metodes
Die voorbeeld hierbo gebruik die .getmetode van die $http
diens.
Die .get metode is 'n kortpad metode van die $http diens. Daar is verskeie kortpadmetodes:
.delete().get().head().jsonp().patch().post().put()
Die metodes hierbo is almal kortpaaie om die $http-diens te bel:
Voorbeeld
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;
});
});
Die voorbeeld hierbo voer die $http-diens uit met 'n objek as 'n argument. Die objek spesifiseer die HTTP-metode, die url, wat om te doen met sukses, en wat om te doen by mislukking.
Eienskappe
Die reaksie van die bediener is 'n objek met hierdie eienskappe:
.configdie voorwerp wat gebruik word om die versoek te genereer..data'n string, of 'n voorwerp, wat die reaksie vanaf die bediener dra..headers'n funksie om te gebruik om kopinligting te kry..status'n nommer wat die HTTP-status definieer..statusText'n string wat die HTTP-status definieer.
Voorbeeld
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;
});
});
Om foute te hanteer, voeg nog een funksies by die .thenmetode:
Voorbeeld
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
Die data wat jy uit die antwoord kry, sal na verwagting in JSON-formaat wees.
JSON is 'n uitstekende manier om data te vervoer, en dit is maklik om binne AngularJS of enige ander JavaScript te gebruik.
Voorbeeld: Op die bediener het ons 'n lêer wat 'n JSON-objek terugstuur wat 15 kliënte bevat, almal toegedraai in 'n skikking genaamd records.
Klik hier om na die JSON-voorwerp te kyk.
Voorbeeld
Die ng-repeataanwysing is perfek om deur 'n skikking te loop:
<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>
Toepassing verduidelik:
Die toepassing definieer die customersCtrlbeheerder, met 'n
$scopeen
$httpvoorwerp.
$httpis 'n XMLHttpRequest-objek vir die versoek van eksterne data.
$http.get()lees JSON-data van
https://www.w3schools.com/angular/customers.php .
By sukses skep die beheerder 'n eiendom, myData, in die omvang, met JSON-data vanaf die bediener.