javascript - 渲染远程 json

Question

我正在尝试使用 pure.js 显示 json 数据。当 json 在页面中被硬编码时它起作用，但当我尝试从我的 url 获取实际的实时 json 时它不起作用。请帮助我通过我的 url 连接到实时 json。

my URL

my fiddle

<script src="http://beebole.com/pure_git/libs/pure.js"></script>

<p>Item: <span id="item" class="item"></span></p>
<p>Count: <span id="count" class="count"></span></p>
<p>Group: <span id="group" class="group"></span></p>

// Hard coded - works
var data = {"item":"chm","count":1,"group":"truthsponsors"}

$.getJSON('http://arbitrarycounter.com/vb/truthsponsors/chm/', function(data) {
    // My attempt to retrieve the live json - doesn't work
});

$('#item').autoRender(data);
$('#count').autoRender(data);
$('#group').autoRender(data);

*服务器已开启跨域共享

Answer 1

Felix 和 Quentin 的评论是准确的。您遇到了同源策略问题。

将 ?callback=? 添加到您要获取的 URL 的末尾。 ? 将替换为内部 jQuery 回调函数的名称。让您的后端脚本使用回调参数的值对返回数据进行函数调用。然后，您将可以在成功处理函数中访问该数据。

例子:

$.getJSON('http://arbitrarycounter.com/vb/truthsponsors/chm/?callback=?', function(data) {
    // My attempt to retrieve the live json - doesn't work
    console.log(data);
});

如果回调设置为 json1341254215 那么你应该返回:

json1341254215({"item":"chm","count":1,"group":"truthsponsors"});

此外，不要忘记在后端脚本的顶部设置内容类型:

header('Content-type: application/'.(strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ? 'json' : 'javascript'));