javascript - 加载本地 .json 文件时，jQuery $.when().done() 无法按预期使用 JSONP

Question

我正在使用 Sammy 和 Knockout 构建 SPA，该 SPA 由不同 URL 上提供的 REST Web 服务提供支持。

我注意到在使用 $.when().done() 时返回 JSONP 与 JSON 时出现一些奇怪的行为...

.done() 永远不会触发，但 .fail() 会触发，即使我收到的状态代码是 200，并且 JSONP Linter 告诉我我的 JSONP 是有效:

(function($) {
    $(function() {
        $.when($.getJSON('endpoint1?callback=?', null),
            $,getJSON('endpoint2?callback=?', null))
        .done(function(resp1, resp2) {
                console.log(resp1); // this is never called
            });
        })
        .fail(function(obj) {
            console.log(obj); // this is called, but why?
        });
    });
})(jQuery);

返回的示例响应为:

callback({
    "external-links": [
        {
            "nav_link_text": "Stack Overflow",
            "url": "http://stackoverflow.com"
        }
    ]
});

如果我返回 JSON 而不是 JSONP，则 .done() 按预期工作。我做错了什么或需要改变什么？

Answer 1

问题在此处指定:

ReferenceError: callback is not defined

您的 JSONP 响应有回调硬编码。这是不正确的。 JSONP需要动态设置函数名。

当 jQuery 发送 JSONP 请求时，它会创建一个名为 jQuery123456(或类似名称)的函数，并在请求中发送该名称。它调用endpoint1?callback=jQuery123456。 JSONP 的工作是调用那个函数。您的 JSONP 需要返回:

jQuery123456({
    your: 'data'
})

您需要使用callback参数的值。

<小时/>

如果由于某种原因，无法“动态”创建 JSONP，您可以强制 jQuery 命名它创建的回调函数。为此，您需要使用 $.ajax :

$.ajax({
    url: 'endpoint1',
    dataType: 'jsonp',
    jsonp: false, // Don't add the "?callback=?" param,
                  // you're not using it anyway
    jsonpCallback: 'callback' // Force jQuery to use "callback"
                              // as the function name
});

注意:jQuery 可能不喜欢对多个请求使用相同的回调值。