jQuery getJSON在本地工作，但不能跨域工作

Question

我已经进行了永久搜索，无法为我的问题提供确切的答案。就是这样。我有一个看起来像这样的JSON文件（我去了jsonlint进行验证，它说的很好）：

[{
        "position":"1",
        "category":"A",
        "title":"Title to first story",
        "description":"The first story."
    },
    {
        "position":"2",
        "category":"B",
        "title":"Title to second story",
        "description":"The second story"
    },
    {
        "position":"3",
        "category":"B",
        "title":"Title to third story",
        "description":"The third story"
    }
]

我使用jQuery解析并使用此函数放置在html页面上：

$.getJSON('page.json', function(data) {
  var items = [];

  $.each(data.reponse, function(item, i) {
    items.push('<li id="' + i.position + '">' + i.title + ' - ' + i.description + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

它完美地工作！现在是我的问题，JSON文件将不在本地托管，并且实际上将托管在单独的域中。所以我修改了我的代码如下（经过阅读），希望它能正常工作：

$.getJSON('http://www.otherdomain.com/page.json?format=json&callback=?', function(data) {
  var items = [];

  $.each(data.reponse, function(item, i) {
    items.push('<li id="' + i.position + '">' + i.title + ' - ' + i.description + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

通过添加“回调”行，我停止出现“无法加载资源”错误。但是，没有任何反应。就像我添加的功能不存在一样。我试图将所有内容都删除，并添加一个简单的“
alert（data）”，但这甚至没有触发。我究竟做错了什么？一个大问题是，我100％只能使用HTML和JavaScript（不是我的选择）。谢谢你的帮助！

编辑 好的，我没有能力让其他服务器向json文件动态添加任何内容。所以我通过围绕json（较小的示例）对函数进行硬编码进行了修改：

storyData(
[{
        "position":"1",
        "category":"A",
        "title":"Title to first story",
        "description":"The first story."
    }
])

现在一切正常！感谢您的所有帮助！

Answer 1

您需要查看JSONP。

本质上，当您尝试从另一个域加载JSON时，它会失败，因为存在无法跨越的域边界。为了避免这种情况，您必须对其进行 PAD
（JSONP中的P）。填充实际上是将其包装在函数调用中（函数名称位于您的客户端上。），例如“正常” JSON响应（例如，getjson.php）：

{foo:'bar'}

回调为的JSON parseJSON（例如，getjson.php？callback = parseJSON）：

parseJSON({foo:'bar'})

请注意， 回调 函数中提供的值如何变成您的JSON响应现在封装在其中的函数的名称。

然后，您的客户端将希望将其传递给parseJSON，客户端上已存在的函数（已定义）。jQuery（和其他库）尝试通过生成一些“随机”函数然后通过原始回调将响应发送回去来为您解决此问题（所有这些操作都是在后台完成的）。

如果可以控制生成JSON的服务器页面，请实现一个回调方法，以便提供JSON的包装方式，以便最终使用它。（仅当您正在处理来自客户端当前不在页面上的域中的数据时，才有必要）。

更新

要基本解决您遇到的问题，您需要找到一种将JSON信息获取到JSONP调用中的方法。在不知道您的“
page.json”使用哪种语言的情况下，以下是其中应包含的伪代码逻辑：

if GET_VARIABLE("callback") is supplied

  print GET_VARIABLE("callback") and an open parenthesis
  print normal JSON data
  print closing parenthesis

else

  print normal JSON data

end if

如果您决定对功能名称进行硬编码，而不是允许其在URL中作为“回调”提供，那么您需要记住它。对于下一个示例，假设我们将其命名为
MyJSONPCallback

现在，在您的客户端代码中，您可以继续使用：

$.ajax({
  url: 'http://anotherdomain.com/page.json?format=json',
  dataType: 'json',
  jsonpCallback: 'MyJSONPCallback', // specify the callback name if you're hard-coding it
  success: function(data){
    // we make a successful JSONP call!
  }
});