AngularJS AJAX - $http
- Forrige side AngularJS Tjenester
- Næste side AngularJS Tabeller
$http er en tjeneste i AngularJS, der bruges til at læse data fra fjernservere.
AngularJS $http
AngularJS $http
Tjenesten sender en anmodning til serveren og returnerer et svar.
实例
Send en simpel anmodning til serveren og vis resultatet i titlen:
<div ng-app="myApp" ng-controller="myCtrl"> <p>Dagens velkomstbesked er:</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>
metode
Det ovenstående eksempel bruger $http
tjenesten .get
Metode.
.get metoden er en hurtigmetode til $http-tjenesten. Der er flere hurtigmetoder:
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
Disse metoder er hurtigveje til at kalde $http-tjenesten:
实例
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; }); });
Det ovenstående eksempel bruger et objekt som parameter til at udføre $http-tjenesten. Objektet specificerer HTTP-metoden, URL, handlingen, der udføres ved succes, og handlingen, der udføres ved fejl.
Egenskab
Svaret fra serveren er et objekt med følgende egenskaber:
.config
Objektet brugt til at generere anmodningen.data
Streng eller objekt, der bærer svar fra serveren.headers
The function used to get header information.status
Define the numeric value for HTTP status.statusText
Define the string for 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; }); });
To handle errors, please 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"; }); });
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>
Applikation beskrivelse:
denne applikation har defineret customersCtrl
kontroller, der har scope
og http
objekt.
$http
er en XMLHttpRequest objektet, brugt til at anmode om eksterne data.
$http.get()
Læst fra https://www.codew3c.com/angular/customers.php JSON Data.
Efterfølgende opretter kontrolleren en egenskab i område myData
som indeholder JSON-data fra serveren.
- Forrige side AngularJS Tjenester
- Næste side AngularJS Tabeller