AngularJS AJAX - $http
- Poprzednia strona Usługi AngularJS
- Następna strona Tabele AngularJS
$http jest usługą AngularJS, używaną do odczytywania danych z serwerów zdalnych.
AngularJS $http
AngularJS $http
Usługa wysyła żądanie do serwera i zwraca odpowiedź.
实例
Wysyłanie prostego żądania do serwera i wyświetlanie wyniku w nagłówku:
<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
Powyższy przykład używa $http
usługi .get
Metoda.
Metoda .get jest szybkim sposobem usługi $http. Istnieją następujące szybkie metody:
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
Powyższe metody są szybkimi sposobami wywołania usługi $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; }); });
Powyższy przykład używa obiektu jako parametru do wykonania usługi $http. Obiekt określa metodę HTTP, URL, operację wykonywaną przy sukcesie oraz operację wykonywaną przy błędzie.
Atrybut
Odpowiedź z serwera jest obiektem o następujących atrybutach:
.config
Obiekt używany do generowania żądań.data
Ciąg lub obiekt, przenoszący odpowiedź z serwera.headers
The function used to obtain header information.status
Define the numeric value of HTTP status.statusText
Define the string of 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, 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>
Opis aplikacji:
Ta aplikacja definiuje customersCtrl
kontroler, który ma zakres
i http
obiektu.
$http
jest Obiekt XMLHttpRequest, używane do żądania zewnętrznych danych.
$http.get()
Przeczytaj z https://www.codew3c.com/angular/customers.php Dane JSON.
Po pomyślnym zakończeniu, kontroler tworzy atrybut w zakresie myData
, które zawierają dane JSON z serwera.
- Poprzednia strona Usługi AngularJS
- Następna strona Tabele AngularJS