AngularJS XMLHttpRequest

$httpC'est un service central dans AngularJS, utilisé pour lire des données depuis un serveur distant.

Format d'utilisation :

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

Méthodes raccourcies

Format des méthodes raccourcies POST et GET :

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

De plus, il existe les méthodes raccourcies suivantes :

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

Pour plus de détails, voir :https://docs.angularjs.org/api/ng/service/$http

Lire le fichier JSON

Ce qui suit est un fichier JSON stocké sur le serveur web :

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

{ "sites": [ { "Nom": "Tutoriel d'exemple", "URL": "www.example.com", "Pays": "CN" }, { "Nom": "Google", "URL": "www.google.com", "Pays": "USA" }, { "Nom": "Facebook", "URL": "www.facebook.com", "Pays": "USA" }, { "Nom": "Weibo", "URL": "www.weibo.com", "Pays": "CN" } ] }

AngularJS $http

AngularJS $http est un service utilisé pour lire des données sur un serveur web.

$http.get(url) est une fonction utilisée pour lire les données du serveur.

Avis de dépréciation (v1.5)

Dans la v1.5,$httpdesuccesseterrorla méthode a été dépréciée. Utilisezthenméthode à la place.

Exemple de méthode générique

AngularJS 1.5 et versions ultérieures - Exemple

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 exécuté lorsque la requête échoue }); });

Essayez-le vous-même »

Exemple de méthode abrégée

AngularJS 1.5 et versions ultérieures - Exemple

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

Essayez-le vous-même »

AngularJS 1.5 et versions antérieures - Exemple

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

Essayez-le vous-même »

Analyse de l'application :

Remarque : La requête GET dans le code ci-dessus cible le serveur de ce site. Vous ne pouvez pas la copier directement et l'exécuter localement, car il y aura des problèmes interdomaines. La solution consiste à copier les données de Customers_JSON.php vers votre propre serveur. Voir :Meilleures solutions pour les problèmes interdomaines avec PHP Ajax。

L'application AngularJS est définie viang-appla directive `ng-app`. L'application s'exécute dans le <div>.

ng-controllerLa directive définit lenom de l'objet `controller`.

La fonctioncustomersControllerest unconstructeur d'objet JavaScript standard.。

L'objet contrôleur possède une propriété :$scope.names。

$http.get()Lit des données statiquesJSON depuis le serveur web.。

Le fichier de données du serveur est : https://www.example.com/try/angularjs/data/sites.php。

Lors du chargement des données JSON depuis le serveur,$scope.namesdevient un tableau.

Note Le code ci-dessus peut également être utilisé pour lire des données depuis une base de données.
Autres extensions