小编典典

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

json

我已经进行了永久搜索,无法为我的问题提供确切的答案。就是这样。我有一个看起来像这样的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."
    }
])

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


阅读 373

收藏
2020-07-27

共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!
  }
});
2020-07-27