我正在开发一个页面,通过jQuery的AJAX支持从Flickr和Panoramio提取图像。
Flickr端工作正常,但当我尝试$。get(url,回调)从全景,我看到一个错误在Chrome的控制台:
XMLHttpRequest无法加载http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150。Access-Control-Allow-Origin不允许原点为空。
如果我直接从浏览器中查询该URL,它可以正常工作。这是怎么回事,我能回避吗?我是否错误地编写了我的查询,或者这是Panoramio所做的阻碍我试图做的事情?
谷歌在错误消息中没有找到任何有用的匹配。
EDIT
下面是一些显示问题的示例代码:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';
$.get(url, function (jsonp) {
var processImages = function (data) {
alert('ok');
};
eval(jsonp);
});
});
您可以在线运行示例。
编辑2
谢谢达林的帮助。上面的代码是错误的。用这个代替:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';
$.get(url, function (data) {
// can use 'data' in here...
});
});
适用于我的谷歌Chrome v5.0.375.127(我得到警报):
$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
alert(json.photos[1].photoUrl);
});
另外,我建议你使用$.getJSON()方法,因为前面的方法在IE8上不起作用(至少在我的机器上):
$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
alert(json.photos[1].photoUrl);
});
你可以从这里上网试试。
更新:
现在你已经展示了你的代码,我可以看到它的问题。您同时拥有匿名函数和内联函数,但它们都将被称为processImages。这就是jQuery的JSONP支持的工作方式。注意到我是如何定义callback=?这样你就可以使用匿名函数。您可以在文档中阅读更多关于它的信息。
另一个注释是你不应该调用eval。传递给匿名函数的参数已经被jQuery解析为JSON。
适用于我的谷歌Chrome v5.0.375.127(我得到警报):
$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
alert(json.photos[1].photoUrl);
});
另外,我建议你使用$.getJSON()方法,因为前面的方法在IE8上不起作用(至少在我的机器上):
$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
alert(json.photos[1].photoUrl);
});
你可以从这里上网试试。
更新:
现在你已经展示了你的代码,我可以看到它的问题。您同时拥有匿名函数和内联函数,但它们都将被称为processImages。这就是jQuery的JSONP支持的工作方式。注意到我是如何定义callback=?这样你就可以使用匿名函数。您可以在文档中阅读更多关于它的信息。
另一个注释是你不应该调用eval。传递给匿名函数的参数已经被jQuery解析为JSON。