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

时间:2011-03-25 14:42:25

标签: jquery json jsonp

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

不幸的是,我似乎无法让它发挥作用。请求已经完成,我可以从Chrome开发人员工具中检索数据(结果已从API下载)。似乎没有进一步的处理。

请求网址如下所示(将“查询”替换为实际查询,在本例中为带名称):

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所属的网站上使用基本相同的代码(减去回调=?)来检索数据没有问题,所以我认为这可能是一个跨域的事情。

解决方案可能肯定是一件非常明显和简单的事情,但我没有取得任何成功。

有什么想法吗?

2 个答案:

答案 0 :(得分:2)

您需要回调才能使用跨域JSONP。

'P'代表'Padded';即带有函数调用。为了解决跨域策略,对于每个JSONP请求,jQuery在DOM中创建一个脚本标记,并将请求的URL作为源。 JSON被加载到脚本标记中然后执行,就像任何其他脚本一样。问题是执行一个对象并没有做太多的事情,而是将一个函数调用包裹起来,以便将该对象作为参数传递给该回调。

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

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

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

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

后者在JSONP加载时调用方法'nameOfCallback',将对象作为唯一参数传递。

对于未来的googlers,此this answer可能会提供更多帮助。

答案 1 :(得分:0)