AngularJS XMLHttpRequest

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

Формат использования:

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

Сокращённые методы

Формат сокращённых методов POST и GET:

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

Кроме того, существуют следующие сокращённые методы:

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

Подробнее см.:https://docs.angularjs.org/api/ng/service/$http

Чтение JSON-файла

Ниже приведён JSON-файл, хранящийся на веб-сервере:

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

{ "sites": [ { "Name": "Пример руководства", "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", "Страна": "CN" } ] }

AngularJS $http

AngularJS $http — это сервис, используемый для чтения данных на веб-сервере.

$http.get(url) — это функция, используемая для чтения данных с сервера.

Уведомление об устаревании (v1.5)

В v1.5,$httpизsuccessиerrorметод устарел. Используйтеthenметод вместо него.

Пример общего метода

AngularJS 1.5 и выше — Пример

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) { //Код, выполняемый при сбое запроса }); });

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

Пример сокращённого метода

AngularJS 1.5 и выше — Пример

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

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

AngularJS 1.5 и ниже — Пример

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

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

Анализ приложения:

Примечание: GET-запрос в приведенном выше коде обращается к серверу этого сайта. Вы не можете просто скопировать его и запустить локально, так как возникнут проблемы с кросс-доменными запросами. Решение — скопировать данные из Customers_JSON.php на собственный сервер. См.:Лучшие решения проблем кросс-доменности в PHP Ajax。

Приложение AngularJS определяется с помощьюng-appдирективы `ng-app`. Приложение выполняется в <div>.

ng-controllerДиректива задаетимя объекта `controller`.

ФункцияcustomersController— это стандартный JavaScriptконструктор объекта.。

Объект controller имеет свойство:$scope.names。

$http.get()Читает статическиеданные JSON с веб-сервера.。

Файл данных сервера: https://www.example.com/try/angularjs/data/sites.php。

При загрузке данных JSON с сервера,$scope.namesстановится массивом.

Note Приведённый выше код также можно использовать для чтения данных из базы данных.
Другие расширения