web-dev-qa-db-ja.com

Angularjs $ http VS jquery $ .ajax

Angularjs $httpと同じようにjQuery's $.ajaxにcontextを設定できますか？

define([
    'app'
], function(app) {

    app.controller("controller1", function($scope, $route, $http) {

        return $http({
            method: 'GET',
            url: 'server.php'
        }).then(function(response) {
            $scope.contacts = response.data;
        });
    });
});

また、jQueryの$.ajaxには、.done、.promiseのようなコールバックがあり、これらを使用して以下のようにcontextを操作できます。Angularjsでも同じことができるのでしょうか。

$.ajax({
    type:       "GET",
    dataType:   "HTML",
    url:        'server.php',
    context:    $("#container"),
    async:      true,
    beforeSend: function() {

        $(this).html('loading...');
    },
    success: function (returndata, status, jqxhr) {
        $(this).html(returndata).hide().fadeIn();
    },
    }).fail(function() { 
        alert("error"); 
    }).done(function(returndata) {
    },
    .always(function() { 
        alert("complete"); 
    }
});
javascriptajaxangularjsjquery
15
laukok

どちらも同じ

$ httpはangular.jsスクリプトから参照されます

$ .ajaxはjqueryスクリプトから参照されます

  • $ httpはasync:falseをサポートしていません

  • $ .ajaxはasync:falseをサポートします

このようにangular.jsを使用してそれを行うことができます

$http.get('server.php').success(function(response) {
            $scope.contacts = response.data;
        }).error(function(error)
    {
//some code    
});

ただし、async: true,はangular.jsではサポートされていません。

非同期コールバックを停止する必要がある場合は、$.ajaxを使用する必要があります

詳細については、このディスカッションを参照してください： jquery $ .ajaxからangular $ http へ

編集：

angular jsで非表示にする方法

<div ng-show="IsShow">xx</div>



  $http.get('server.php').success(function(response) {
                $scope.contacts = response.data;
                $scope.IsShow=true;
                $scope.$apply();
            }).error(function(error)
        {
           $scope.IsShow=false; 
           $scope.$apply(); 
    });
22
Ramesh Rajendran

渡す関数でFunction.bind()を使用するだけですpromise.thenは、必要なコンテキストを維持します。例えば：

return $http({
    method: 'GET', 
    url:'server.php'
}).then(function(response) {
    $scope.contacts = response.data;
}.bind(this));

ただし、コールバックがすべて操作要素であることに気付いています。Angularで実行する必要はありません。あなたがしようとしているがコールバックではできない特定のことはありますか？

3
Jeff Hubbard