最新のWeb開発のチュートリアル
 

AngularJS AJAX - $ HTTP

❮前 次の章❯

$ HTTPリモートサーバーからデータを読み出すためのAngularJSのサービスです。

AngularJS $ HTTP

AngularJS $httpサービスは、サーバーへの要求を行い、応答を返します。

例

サーバーへの単純な要求を作成し、ヘッダに結果を表示します：

<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>
»それを自分で試してみてください

メソッド

上記の例では、使用しています.getの方法$httpサービスを。

.getメソッドは、$ HTTPサービスのショートカットメソッドです。 いくつかのショートカットの方法があります。

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

上記の方法は、$ HTTPサービスを呼び出して、すべてのショートカットです：

例

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "welcome.htm"
    }).then(function mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});
»それを自分で試してみてください

上記の例では、引数としてオブジェクトと$ HTTPサービスを実行します。 オブジェクトが成功した場合に実行すると、失敗した場合に何をすべきかをどのようなHTTPメソッド、URLを、指定されています。

プロパティ

サーバからの応答は、これらのプロパティを持つオブジェクトです。

  • .config要求を生成するために使用するオブジェクトを。
  • .dataサーバからの応答を運んで、文字列、またはオブジェクトを。
  • .headersヘッダー情報を取得するために使用する機能を。
  • .status HTTPステータスを定義する番号を。
  • .statusText HTTPステータスを定義する文字列を。

例

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;
    });
});
»それを自分で試してみてください

1つのより多くの機能を追加し、エラーを処理するには.then方法：

例

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

あなたが応答から取得したデータをJSON形式であると予想されます。

JSONはデータを輸送する素晴らしい方法であり、AngularJS、または任意の他のJavaScript内で使用することは容易です。

例：サーバー上で私たちは15の顧客を含むJSONオブジェクト、すべての配列と呼ばれるにラップして返しますファイル持つrecords 。

JSONオブジェクトを見てみましょう。

×

customers.php 

 {{データ| JSON}}

例

ng-repeatディレクティブは、配列をループするのに最適です。

<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()からJSONデータを読み込みhttp://www.w3ii.com/angular/customers.php 。

成功した場合、コントローラは、プロパティ、作成myDataサーバからJSONデータを、スコープで、。


❮前 次の章❯