jQuery .ajax()调用失败

我正在尝试对公共Web服务进行jQuery .ajax()调用,而我却无法找到正确的语法。

我尝试了几种不同的实现方式。 这个:

 $.ajax({ url: 'http://www.geognos.com/api/en/countries/info/all.jsonp', dataType: "jsonp", success: function() { alert('JSONP call succeeded!'); } }); 

它失败并出现以下错误:

 all.jsonp:1 Uncaught ReferenceError: callback is not defined 

还有这个:

 $.ajax({ url: 'http://www.geognos.com/api/en/countries/info/all.json', dataType: "json", success: function() { alert('JSON call succeeded!'); } }); 

失败,出现此错误:

 XMLHttpRequest cannot load http://www.geognos.com/api/en/countries/info/all.json. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin. 

我通过本地IIS7实例提供页面服务。 我也尝试过类似$.getJSON()各种组合。 我错过了什么?

这是上面代码的JSFiddle 。

更新:以为我们有一个解决方案,但是在执行JSONP调用时,我仍然得到callback is not defined错误,即使调用了警报/日志代码。 响应URL如下所示:

 http://www.geognos.com/api/en/countries/info/all.jsonp?callback=undefined&157148585 

并且JSON响应包含如下:

 callback({"StatusMsg": "OK", "Results": {"BD": {"Name": "Bangladesh", "Capital": {"DLST": "null", "TD": 6.0, "Flg": 2, "Name": "Dhaka", ... 

我已经找到了在.ajax()配置中将URL添加到URL末尾的示例,但是当我尝试得到相同的结果时,只有它被添加到我的查询字符串的末尾。

由于相同的原始策略,此常规JSON调用将不起作用。 这是您的错误告诉您的: is not allowed by Access-Control-Allow-Origin

正确的JSONP语法是:

 $.ajax({ url: 'http://www.geognos.com/api/en/countries/info/all.jsonp', dataType: "jsonp", jsonpCallback: 'callback', success: function(data) { console.log(data); } }); 

DEMO

正确的用法隐藏在$ .ajax()的文档中。 搜索jsonpCallback选项。

 $.ajax({ url: 'http://www.geognos.com/api/en/countries/info/all.jsonp', dataType: "jsonp", jsonpCallback: function() { alert('JSONP call succeeded!'); } }); 

小提琴: http : //jsfiddle.net/gya3b/3/

如果您创建代理来为您加载url,则可以使其正常工作。

 $.ajax({ url: 'proxy.php?url=http://www.geognos.com/api/en/countries/info/all.json', dataType: "json", success: function() { alert('JSON call succeeded!'); } }); 

在这里, proxy.php将为您加载http://www.geognos.com/api/en/countries/info/all.json

关于JSONP部分,您的语法无效。 有关更多信息,请参见http://api.jquery.com/jQuery.ajax/ 。

如果您需要对不同源的域(即基本URL)进行Web服务调用,则需要使用代理来执行此操作。 代理不一定有义务使用相同的域名限制。

它们根据您使用的平台(即.NET / LAMP)而有所不同。

该网站有多篇关于如何创建的post。

以下是如何解决此问题的示例。 通过设置你的jsoncallback。

 $.ajax(url, { dataType: 'jsonp', jsonp: 'jsoncallback' }) .then(function(data, status, xhr) { console.log(status); console.log('success (promises): ' + data.name); }, function(xhr, status, error) { console.log('failed (promises): ' + error); });