AngularJS XMLHttpRequest

$httpEs ist ein Kernservice in AngularJS, der verwendet wird, um Daten von einem Remoteserver zu lesen.

Nutzungsformat:

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

Kurzschreibweisen-Methoden

Format für POST- und GET-Kurzschreibweisen-Methoden:

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

Zudem gibt es die folgenden Kurzschreibweisen-Methoden:

  • $http.get
  • $http.head
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.patch

Weitere Details finden Sie unter:https://docs.angularjs.org/api/ng/service/$http

JSON-Datei lesen

Das Folgende ist eine auf dem Webserver gespeicherte JSON-Datei:

https://www.example.com/try/angularjs/data/sites.php

{ "sites": [ { "Name": "Example Tutorial", "Url": "www.example.com", "Country": "CN" }, { "Name": "Google", "Url": "www.google.com", "Country": "USA" }, { "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" }, { "Name": "Weibo", "Url": "www.weibo.com", "Country": "CN" } ] }

AngularJS $http

AngularJS $http ist ein Service, der verwendet wird, um Daten auf einem Webserver zu lesen.

$http.get(url) ist eine Funktion, die verwendet wird, um Serverdaten zu lesen.

Hinweis zur Deprecierung (v1.5)

In v1.5,$httpvonsuccessunderrorwurde die Methode als veraltet markiert. Verwenden Sie stattdessen diethenMethode.

Beispiel für generische Methode

AngularJS 1.5 und höher – Beispiel

var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http({ method: 'GET', url: 'https://www.example.com/try/angularjs/data/sites.php' }).then(function successCallback(response) { $scope.names = response.data.sites; }, function errorCallback(response) { //Code, der ausgeführt wird, wenn die Anfrage fehlschlägt }); });

Selbst ausprobieren »

Beispiel für Kurzschreibweisen-Methode

AngularJS 1.5 und höher – Beispiel

<div ng-app="myApp" ng-controller="siteCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http.get("https://www.example.com/try/angularjs/data/sites.php") .then(function (response) {$scope.names = response.data.sites;}); }); </script>

Selbst ausprobieren »

AngularJS 1.5 und darunter – Beispiel

<div ng-app="myApp" ng-controller="siteCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http.get("https://www.example.com/try/angularjs/data/sites.php") .success(function (response) {$scope.names = response.sites;}); }); </script>

Selbst ausprobieren »

Anwendungsanalyse:

Hinweis: Die GET-Anfrage im obigen Code zielt auf den Server dieser Website ab. Sie können sie nicht direkt kopieren und lokal ausführen, da es zu Cross-Domain-Problemen kommen wird. Die Lösung besteht darin, die Daten von Customers_JSON.php auf Ihren eigenen Server zu kopieren. Siehe:Best Solutions for PHP Ajax Cross-Domain Issues。

Die AngularJS-Anwendung wird überng-appdie `ng-app`-Direktive definiert. Die Anwendung wird im <div> ausgeführt.

ng-controllerDie Direktive legt den`controller`-Objektnamen fest.

Die FunktioncustomersControllerist ein Standard-JavaScript-Objektkonstruktor.。

Das Controller-Objekt hat eine Eigenschaft:$scope.names。

$http.get()Liest statischeJSON-Daten vom Webserver.。

Die Server-Datendatei ist: https://www.example.com/try/angularjs/data/sites.php。

Beim Laden von JSON-Daten vom Server$scope.nameswird es zu einem Array.

Note Der obige Code kann auch zum Lesen von Datenbankdaten verwendet werden.
Andere Erweiterungen