Question

我试图用pure.js显示json数据。当json在页面中硬编码时它可以正常工作，但是当我尝试从我的url获取实际的json时它不会。请帮我通过我的网址连接到现场json。

<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=?添加到您要提取的网址的末尾。 ?将替换为内部jQuery回调函数的名称。让后端脚本使用callback参数的值来使用返回数据进行函数调用。然后，您将可以在成功处理函数中访问该数据。

示例：

$.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'));

Answer 2

启用CORS后，您可以轻松获取数据。请参阅：http://enable-cors.org/

<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>

$.getJSON('http://arbitrarycounter.com/vb/truthsponsors/chm/', function(data) {
    $('#item').autoRender(data);
    $('#count').autoRender(data);
    $('#group').autoRender(data);
});

Updated Fiddle

渲染远程json

2 个答案: