渲染遠程json

我想用pure.js顯示json數據。它適用於json在頁面中正確編碼的情況，但當我嘗試從我的url中獲取實際的json時，它不起作用。請幫我通過我的網址連接到現場的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);

*跨起源共享已在服務器上啓用。

來源

2013-07-22 Justice Gödel Conder

「純」是圖書館最討厭的名字:) –

一方面，你必須移動有訪問數據*成* Ajax回調。另一方面，如果頁面不是從同一個域中提供的，而是嘗試從中訪問數據，那麼您可能會受到相同的源策略（例如jsFiddle演示）的影響。 –

可能的重複[方法規避同源政策]（http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy） – Quentin

費利克斯和昆汀評價的是準確的。您遇到了同源策略問題。

將?callback=?添加到您要提取的網址的末尾。 ?將被替換爲內部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'));

來源

2013-07-22 17:33:23 prothid

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

來源

2013-07-22 20:16:58

回答

相關問題