我已经进行了永久搜索,无法为我的问题提供确切的答案。就是这样。我有一个看起来像这样的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." } ])
现在一切正常!感谢您的所有帮助!
您需要查看JSONP。
本质上,当您尝试从另一个域加载JSON时,它会失败,因为存在无法跨越的域边界。为了避免这种情况,您必须对其进行 PAD (JSONP中的P)。填充实际上是将其包装在函数调用中(函数名称位于您的客户端上。),例如“正常” JSON响应(例如,getjson.php):
{foo:'bar'}
回调为的JSON parseJSON(例如,getjson.php?callback = parseJSON):
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! } });