jquery $ .ajaxからangular $ http


122

クロスオリジンで正常に動作する次のjQueryコードがあります。

jQuery.ajax({
    url: "http://example.appspot.com/rest/app",
    type: "POST",
    data: JSON.stringify({"foo":"bar"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log("success");
    },
    error: function (response) {
        console.log("failed");
    }
});

これを成功させずにAngular.jsコードに変換しようとしています:

$http({
    url: "http://example.appspot.com/rest/app",
    dataType: "json",
    method: "POST",
    data: JSON.stringify({"foo":"bar"}),
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

助けてくれてありがとう。


3
angular.jsはわかりませんが、faile()は関数の名前が間違っている可能性がありますか?
Bogdan Rybak


解決策を発見した可能性があるstackoverflow.com/questions/12111936/…深く掘り下げる必要がある...
エンドレスな

OPTIONSリクエストはブラウザによって発行され、AngularJS /アプリケーションに対して透過的です。OPTIONが成功すると、元のリクエスト(POST / GET /何でも)が続き、コードはOPTIONリクエストではなくメインリクエストに対してコールバックされます。
pkozlowski.opensource 2012

AngularがリクエストメソッドをOPTIONSに変更しているのではないでしょう。おそらく、ブラウザがCORSリクエストを実行できるかどうかを確認するためのチェックです。別のドメインへの呼び出しを行おうとしている場合、ブラウザは最初にOPTIONSリクエストを行い、それが許可されているかどうかを確認します。
Ian

回答:


202

$ httpを呼び出すAngularJSの方法は次のようになります。

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.data = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.error = response.statusText;
});

または、ショートカットメソッドを使用してさらに簡単に記述できます。

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);

注意すべき点がいくつかあります。

  • AngularJSバージョンはより簡潔です(特に.post()メソッドを使用)
  • AngularJSはJSオブジェクトをJSON文字列に変換し、ヘッダーを設定します(これらはカスタマイズ可能です)
  • コールバック関数にはそれぞれ名前が付けられsuccessていerrorます(各コールバックのパラメーターにも注意してください)-Angular v1.5で非推奨
  • 使用がthen代わりに機能します。
  • then使用法の詳細については、こちらをご覧ください

上記は簡単な例といくつかのポインタです。詳細については、AngularJSのドキュメントを確認してください:http : //docs.angularjs.org/api/ng.$http


2
知っておきたい!ただし、私が処理しているクライアントエラーは関係ありません。AngularはRequestメソッドをOPTIONSに変更します。私はそれをサポートするためにいくつかのサーバー側のことをしなければならないと思う
エンドレス

はい、サーバー側の問題を最初に解決する必要があると思います。その後、クライアント側でAngularの$ httpの全機能を楽しむことができます。おそらく、AngularJSはjQueryと比較してより多くの/異なるヘッダーを送信しているため、追加のOPTIONSリクエストが表示されます。
pkozlowski.opensource 2012

1
注:get "params:"ではなく "data:"では、stackoverflow.com
questions / 13760070 /…を

5
paramsdata2つの異なるもの:paramsはURL(クエリ文字列)で終わりますが、データ-リクエストボディ内(実際にボディを持つことができるリクエストタイプのみ)。
pkozlowski.opensource 2013

「リクエストメソッドを角度に変更してオプションに変更します。サーバー側でサポートする必要があると思います」同じ問題が発生しますが、jqueryが行わない角度の追加は何ですか?
Andrew Luhring、2015

1

AngularJsのhttpサービスを使用してajaxリクエストを実装できます。これは、リモートサーバーからのデータの読み取り/ロードに役立ちます。

$ httpサービスメソッドを以下に示します。

 $http.get()
 $http.post()
 $http.delete()
 $http.head()
 $http.jsonp()
 $http.patch()
 $http.put()

例の1つ:

    $http.get("sample.php")
        .success(function(response) {
            $scope.getting = response.data; // response.data is an array
    }).error(){

        // Error callback will trigger
    });

http://www.drtuts.com/ajax-requests-angularjs/



-5

$ .paramを使用してデータを割り当てることができます:

 $http({
  url: "http://example.appspot.com/rest/app",
  method: "POST",
  data: $.param({"foo":"bar"})
  }).success(function(data, status, headers, config) {
   $scope.data = data;
  }).error(function(data, status, headers, config) {
   $scope.status = status;
 });

これを見てください:AngularJS + ASP.NET Web APIクロスドメインの問題


4
$ .paramはjQueryであるため、それを使用するにはjQueryをロードする必要があります。$ http transformRequestインターセプターを使用したjQueryフリーの例については、pastebin.com / zsn9ASkM
Brian

@ブライアンちょっと待って、jQueryはAngularJSの依存関係ではないですか?最初にjQueryをロードしないと、$ httpはありません。
jnm2

2
@ jnm2-いいえ、jQueryはAngularJSの依存関係ではありません。$ httpはAngular $ httpサービスコンポーネントを指し、jQueryからのものではありません。AngularJSには、DOMの操作に使用できる「jQuery Lite」がありますが、非常に制限されています。Angular要素から-jQueryが使用可能な場合、angular.elementはjQuery関数のエイリアスです。jQueryが使用できない場合、angular.elementは、「jQuery lite」または「jqLit​​e」と呼ばれるAngularの組み込みjQueryサブセットに委任します。
ブライアン、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.