带有jsonp的角度$资源不起作用答案

【问题标题】：angular $resource with jsonp not working带有jsonp的角度$资源不起作用
【发布时间】：2012-10-27 08:46:01
【问题描述】：

我在使用以下代码时遇到了问题：

angular.module('offerServices', ['ngResource'])
    .factory('Offer', function ($resource) {

        return $resource('url/offers', { callback: 'JSON_CALLBACK' },
            {
                query: { method: 'JSONP' }
            }
        );                   

    })
    .factory('Trustyou', function ($resource) {
            return $resource('https://api.trustyou.com/hotels/:id/seal.json', {},
                {
                    query: { method: 'JSONP' }
                }
            );
    });

调用 Offer.query({}, function(){});在我的控制器中工作没有任何问题。但这部分不起作用：

       var trustYouData = Trustyou.query({ id: 'd8421e79-99f0-41b2-8d6e-9cfd62a9776b' }, function (data) {
            console.log(data);
        });

这总是返回 400 错误：

“网络错误：400 错误请求 - https://api.trustyou.com/hotels/d8421e79-99f0-41b2-8d6e-9cfd62a9776b/seal.json?callback=angular.callbacks._1”

当我更改代码并使用 jQuerys.getJSON 时，我没有任何问题：

 $.getJSON("https://api.trustyou.com/hotels/d8421e79-99f0-41b2-8d6e-9cfd62a9776b/seal.json?callback=?", function (data) {
            console.log(data);                           
        });

为什么 jQuery 方法有效但 angulars $resource 实现在这种情况下返回错误？

【问题讨论】：

你试过GET而不是JSONP吗？另外，在您发布问题时，格式是否与 URL 的当前响应相同？
是的，我也试过 $http.get，格式是一样的...

标签： javascript angularjs

【解决方案1】：

angular 的回调函数有一些问题，我在 git 中打开了一个问题

https://github.com/angular/angular.js/issues/1551

回调名称必须为“JSONP_CALLBACK”，其中 Angular 会将回调名称转为 callback=angular.callbacks._1

有些网络服务不能接受“angular.callbacks._1”回调名称。

解决方案：

var stock_hack

function stock_search(data) {
    stock_hack = data;
 }


var stock_hack

function stock_search(data) {
    stock_hack = data;
}


function jsonp_example($scope, $http) {

    $scope.doRequest = function() {
        $http({
            method: "JSONP",
            params: {
                input: "GM",
                callback: "stock_search"
            },
            url: "http://dev.markitondemand.com/Api/Lookup/jsonp",
            isArray: true
        }).success(function(data, status) {
/*
                 *Never Goes HERE !!
                 */


        }).error(function(data, status) {

/*
                 * FREAKING HACK !!!!
                 */
            console.info("goes here")
            console.info(stock_hack)

        });
    };


}

我的小提琴http://jsfiddle.net/pMGgR/

关键是你必须调用另一个 javascript 函数来获取你的 json 响应。

希望有帮助

【讨论】：

谢谢@Todi！你是对的，显然我正在使用的 Web 服务与 Angular 的回调处理程序“callback=angular.callbacks._1”不兼容。您的解决方案现在很好用！希望这个问题能尽快得到解决！ +1
我不明白为什么这个答案中的代码定义了两次 stock_hack var 和 stock_search() 函数。是错字吗？
@TodiAdiatmo，正如 JeffryHouser 所说，我不明白为什么这个答案中的代码定义了两次 stock_hack var 和 stock_search() 函数。是错字吗？

【解决方案2】：

我想我会为这个问题添加一个真正的解决方案。这是一个可行的解决方案。

这里是代码

var symbol = 'NFLX';
var url = "http://dev.markitondemand.com/Api/v2/Lookup/jsonp?input="+ symbol +"&callback=JSON_CALLBACK";

$http.jsonp(url)
.success(function(data){
   console.info(data);
}).error(function(data, status) {
   console.info(data);
});

//[{"Symbol":"NFLX","Name":"Netflix Inc","Exchange":"NASDAQ"}]

Click here to go to the direct link

【讨论】：