AngularJS AJAX - $http

$http является сервисом AngularJS, предназначенным для чтения данных с удаленного сервера.

AngularJS $http

AngularJS $http Сервис отправляет запрос на сервер и возвращает ответ.

Example

Отправить простый запрос на сервер и отобразить результат в заголовке:

<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>

Попробуйте сами

метод

В примере выше используется $http сервиса .get Метод.

Метод .get является сокращенным способом $http сервиса. Имеются следующие сокращенные методы:

  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

Все перечисленные методы являются сокращенными способами вызова $http сервиса:

Example

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 сервиса. Этот объект specifies HTTP метод, URL, действие, выполняемое при успешном выполнении, и действие, выполняемое при ошибке.

Свойства

Ответ от сервера является объектом с следующими свойствами:

  • .config Объект, используемый для генерации запроса
  • .data Строка или объект, содержащий ответ от сервера
  • .headers The function to get header information
  • .status Define the numeric HTTP status
  • .statusText Define the string of HTTP status

Example

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 The method adds a function:

Example

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 of which are wrapped in a name called records in the array.

Please click here to view the JSON object.

Example

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>

Попробуйте сами

Описание приложения:

приложение определяет customersCtrl контроллер, имеющий scope и http объектом.

$http является Объект XMLHttpRequest, используемый для запроса внешних данных.

$http.get() Чтение с https://www.codew3c.com/angular/customers.php JSON данные.

После успешного выполнения контроллер создает свойство в области видимости myDataвключая JSON данные с сервера.