jquery - 无法让 jQuery 从另一个域获取 JSON(使用 JSONP)

Question

我正在使用一个 API(我制作的，必要时可以更改)，它会输出一些 JSON(使用 PHP 的 json_encode，因此它是有效的)。我在另一个域的另一个网站上使用它来检索数据。

不幸的是，我似乎无法让它工作。据我所知，Chrome 开发者工具已发出请求，并检索了数据(结果已从 API 下载)。但似乎没有发生进一步的处理。

请求 URL 如下所示(将“query”替换为实际查询，在本例中为乐队名称):

http://gatekrash.com/api/v1?t=search&s=national&p=0&n=15&q=QUERY&callback=?

Link to results page with query being 'Noah and the Whale'

结果如下所示(有效的 JSON):

[{"id":"4123","title":"Noah And The Whale","type":null,"start":"2011-03-30 19:30:00","end":"2011-03-31 00:30:00","venue":{"id":"154","name":"The Deaf Institute"},"place":{"id":"17374","name":"Manchester"},"source_count":"1","performers":""},{"id":"9317","title":"Noah And The Whale","type":null,"start":"2011-05-04 19:00:00","end":"2011-05-05 00:00:00","venue":{"id":"539","name":"Leeds Metropolitan University"},"place":{"id":"15473","name":"Leeds"},"source_count":"1","performers":""}]

我用来获取此数据的 jQuery 如下所示:

$(document).ready(function(){
    getSearch("Noah and the Whale");
});
$(document).ready((function(query) {
getSearch = function(query) {
    url = "http://gatekrash.com/api/v1?t=search&s=national&p=0&n=15&q=" + query + "&callback=?";
    $.getJSON(url,
        function(json) {
            alert("Success!");
        }
    );
}
})());

据我所知，这应该有效。我在 API 所属的网站上使用基本相同的代码(减去回调=？)来检索数据，没有任何问题，所以我认为这可能是跨域的事情。

解决方案可能绝对是在我面前如此明显和简单的东西，但我还没有成功地让它发挥作用。

有什么想法吗？

Answer 1

您需要回调才能使跨域 JSONP 正常工作。

“P”代表“填充”；即通过函数调用。为了绕过跨域策略，对于每个 JSONP 请求，jQuery 在 DOM 中创建一个脚本标记，并以请求的 URL 作为源。 JSON 被加载到脚本标记中然后执行，就像任何其他脚本一样。问题是执行一个对象并不能做太多事情，因此函数调用被包装在它周围，以便该对象作为参数传递给该回调。

JSON:(通常使用 XMLHttpRequest 等作为文本直接加载到 javascript 中)

{ "really":"simple", "example":"object" }

JSONP:(通常加载到脚本标签中以避免跨域策略)

nameOfCallback({ "really":"simple", "example":"object" })

后者会在 JSONP 加载时调用“nameOfCallback”方法，并将对象作为唯一参数传递。

对于 future 的 Google 用户，此 this answer可能会提供更多帮助。