AngularJS AJAX - $http

$http 是 AngularJS 的一个服务，用于从远程服务器读取数据。

AngularJS $http

AngularJS $http 服务向服务器发出请求，并返回响应。

Beispiel

向服务器发送一个简单请求，并在标题中显示结果：

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

Probieren Sie es selbst aus

方法

上面的例子使用 $http 服务的 .get 方法。

.get 方法是 $http 服务的快捷方法。有以下几种快捷方法：

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

上述方法都是调用 $http 服务的快捷方式：

Beispiel

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;
  });
});

Probieren Sie es selbst aus

上面的例子使用一个对象作为参数来执行 $http 服务。该对象指定 HTTP 方法、URL、成功时执行的操作以及失败时执行的操作。

属性

来自服务器的响应是具有以下属性的对象：

• .config 用于生成请求的对象
• .data 字符串或对象，携带来自服务器的响应
• .headers Funktion zum Abrufen von Header-Informationen
• .status Definieren Sie die Nummer für den HTTP-Status
• .statusText Definieren Sie die Zeichenkette für die HTTP-Status

Beispiel

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;
  });
});

Probieren Sie es selbst aus

Um Fehler zu behandeln, richten Sie sich an .then Eine Funktion hinzufügen

Beispiel

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // Erste Funktion behandelt Erfolg
    $scope.content = response.data;
  }, function(response) {
    // Zweite Funktion behandelt Fehler
    $scope.content = "Etwas ist schiefgelaufen";
  });
});

Probieren Sie es selbst aus

JSON

Die aus der Antwort gewonnenen Daten sollten im JSON-Format sein.

JSON ist ein hervorragendes Medium für den Datenverkehr und leicht in AngularJS oder jedem anderen JavaScript zu verwenden.

Beispiel: Wir haben auf dem Server eine Datei, die ein JSON-Objekt mit 15 Kunden zurückgibt, alles in einer Datei mit dem Namen records im Array.

Klicken Sie hier, um das JSON-Objekt anzuzeigen.

Beispiel

Die ng-repeat-Direktive ist perfekt für das Durchlaufen eines Arrays:

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

Probieren Sie es selbst aus

Programmbeschreibung:

dieses Programm definiert customersCtrl Controller, der scope und http -Objekt.

$http ist eine XMLHttpRequest-Objekt, um externe Daten anzufordern.

$http.get() von https://www.codew3c.com/angular/customers.php gelesen JSON-Daten.

Nach dem Erfolg, erstellt der Controller eine Eigenschaft im Bereich myData, die JSON-Daten vom Server enthält.