[{
"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","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=?',html: items.join('')
}).appendTo('body');
});
通过添加“回调”行,我停止获取“无法加载资源”错误.但是,没有任何事情发生.这就像我添加的功能甚至不在那里.我试图把它全部出来,并添加一个简单的“警报(数据)”,但这甚至没有发射.我究竟做错了什么？一个大问题是,我只有100％限于HTML和JavaScript才能工作(不是我的选择).感谢任何帮助！
编辑
好的,我没有其他服务器动态添加任何东西到json文件的能力.所以我修改通过硬编码json周围的函数(较小的示例)：
storyData(
[{
"position":"1","description":"The first story."
}
])
一切都行！感谢所有的帮助！
解决方法
基本上,当您尝试从另一个域加载JSON时,它会失败,因为有一个域边界不能交叉.为了避免这种情况,你必须PAD它(P在JSONP).填充它本质上是将其包装在函数调用中(函数名称驻留在客户端上).一个“正常”的JSON响应(例如,getjson.PHP)：
{foo:'bar'}
具有parseJSON的回调的JSON变得(例如,getjson.PHP？callback = parseJSON)：
parseJSON({foo:'bar'})
请注意,回调中提供的值是否是您的JSON响应现在包装的函数的名称.
那么您的客户端将会将其传递给parseJSON,这是您客户端(您定义的)上存在的函数. jQuery(和其他库)尝试通过生成一些“随机”功能来为您照顾,然后通过原始回调(所有这些都是在引擎盖子下)来发送响应.
如果您可以控制生成JSON的服务器页面,请执行回调方法,以便您可以提供如何包装JSON,以便您可以随时使用它. (只有当您处理来自除客户端当前所在页面之外的域的数据时,才需要这样做).
UPDATE
要基本解决您遇到的问题,您需要找到一种方法来获取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!
}
});