jQuery .ajax（）調用失敗

Question

我正在嘗試對公共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末尾的示例，但是當我嘗試得到相同的結果時，只有它被添加到我的查詢字符串的末尾。

Answer 1

由於相同的原始策略，此常規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

Answer 2

正確的用法隱藏在$ .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/

Answer 3

如果您創建代理來為您加載網址，則可以使其正常工作。

$.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/ 。

Answer 4

以下是如何解決此問題的示例。 通過設置你的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);
});

Answer 5

如果您需要對不同源的域（即基本URL）進行Web服務調用，則需要使用代理來執行此操作。 代理不一定有義務使用相同的域名限制。

它們根據您使用的平台（即.NET / LAMP）而有所不同。

該網站有多篇關於如何創建的帖子。