Angularjs $http VS jquery $.ajax

Posted 2023-02-19

【中文标题】Angularjs $http VS jquery $.ajax

【英文标题】：

【发布时间】：2014-01-18 13:24:24

【问题描述】：

我可以像在jQuery's $.ajax 中那样在Angularjs $http 中设置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"); 
    
);

【参考方案1】：

两者都一样

$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    
);

但angular.js 不支持async: true,。

如果需要停止异步回调，则必须使用$.ajax方式

更多细节请看这个讨论：from jquery $.ajax to 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(); 
    );

【讨论】：

谢谢。我能知道** 是干什么用的吗？

@lauthiamkok ** 什么都不是。它是如此大胆的线标记。 $scope.$apply() 表示$scope.IsShow=true 申请Html。但这可能不需要。

谢谢。我确实发现 jquery 方法更简单，更直接。你不觉得吗？

@lauthiamkok ，是的，你可以用 jquery 来做。那么为什么要使用 angular.js？您可以使用 jquery 或 angular.js 来完成。两者都是最好的。但是 angular.js 有助于比 jquery 更快地绑定。快乐编码:)

你能不能把你的答案中的英语语法稍微改进一下，会更容易理解

【参考方案2】：

只需在您交给promise.then 的函数上使用Function.bind() 即可维护您想要的上下文。例如：

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

但是，我注意到您的回调都在操作元素——您不需要在 Angular 中执行这些操作。您是否正在尝试执行某些具体操作但无法通过回调执行？

【讨论】：

感谢杰夫。我只需要像在$.ajax 中那样做两件事 - 1. beforeSend: function() $(this).html('loading...'); 和 2 - success: function (returndata, status, jqxhr) $(this).hide().fadeIn(); 。

所以...是的，您应该改用请求和响应拦截器，并根据待处理的 HTTP 请求的数量显示/隐藏它。