在角度 404 错误中将 $.ajax 调用转换为 $http 调用答案

【问题标题】：Converting $.ajax call to $http call in angular 404 error在角度 404 错误中将 $.ajax 调用转换为 $http 调用
【发布时间】：2015-02-26 22:58:22
【问题描述】：

我正在将 jquery ajax 调用转换为角度 $http 调用，但由于某种原因返回 404 状态。这是原始的 jquery 调用。

function getStaffInfo(){                    
    $.ajax({
        url: 'https://my.website.com/j/wkr/stafflist.php',
        data: {f: 'staff'},
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'vcLoadStaff',
        success: function(){
                                //alert("success");
        }
    });
}

这是角度 $http 调用：

app.service('staffList', function($http){

var staffList = {};

$http.jsonp('https://my.website.com/j/wkr/stafflist.php', {"f":"staff"})
.success(function(data, status, headers, config) {
        console.log(data);
        staffList = data;
    }).error(function(data, status, headers, config) {
        console.log(status);
});

return staffList;

});

我的 Angular 代码中是否遗漏了什么？

【问题讨论】：

在侧参数中添加 {"f":"staff", "callback":"jsonp_callback" }

标签： angularjs angular-http

【解决方案1】：

我认为您需要将?callback=JSON_CALLBACK 附加到您的网址。

$http.jsonp('https://my.website.com/j/wkr/stafflist.php?callback=JSON_CALLBACK', {"f":"staff"})
.success(function(data, status, headers, config) {
        console.log(data);
        staffList = data;
    }).error(function(data, status, headers, config) {
        console.log(status);
});

编辑：澄清一下，当您进行更改时，生成的数据将包装在 JSON_CALLBACK([...]) 中。另请查看this相关答案。

【讨论】：

【解决方案2】：

http 服务将负载作为承诺返回，因此您可能会发现您必须在使用它的控制器内的服务上调用成功，就像这样..

app.service('staffList', function ($http) {
    return {
        getList: function () {
            $http.jsonp('https://my.website.com/j/wkr/stafflist.php?callback=JSON_CALLBACK', {"f":"staff"})
        }
    };
});

app.controller('staffController', [$scope, staffList, 
    function($scope, staffList) {

        staffList.getList().success(function(data, status, headers, config) {
            console.log(data);
        }).error(function(data, status, headers, config) {
            console.log(status);
        });
    }
]);

虽然我发现上面的实现更易于使用，但 angular $q 服务也可能有用。

https://docs.angularjs.org/api/ng/service/$q

【讨论】：

【解决方案3】：

在 Angular 文档中，您的 $http.jsonp 可以是这样的：

jsonp(url, [config]);

所以你可以试试

$http.jsonp('https://my.website.com/j/wkr/stafflist.php', {data:{"f":"staff"}})

https://docs.angularjs.org/api/ng/service/$http#jsonp

【讨论】：