从.json URL获取数据并使用Javascript/JQuery在HTML中显示

从.json URL获取数据并使用Javascript/JQuery在HTML中显示,javascript,html,json,url,Javascript,Html,Json,Url,我正在尝试从以下位置获取json数据: 然后我希望在表中显示这些数据。以下代码在json链接指向我的计算机上已经存在的文件时有效,但在引用URL时无效 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> <script> $(functi

我正在尝试从以下位置获取json数据: 然后我希望在表中显示这些数据。以下代码在json链接指向我的计算机上已经存在的文件时有效,但在引用URL时无效

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>

$(function() {

var entries = [];
var dmJSON = "http://api.dailymile.com/entries.json";
$.getJSON( dmJSON, function(data) {
   $.each(data.entries, function(i, f) {
      var tblRow = "<tr>" + "<td>" + f.id + "</td>" + "<td>" + f.user.username + "</td>" + "<td>" + f.message + "</td>" + "<td> " + f.location + "</td>" +  "<td>" + f.at + "</td>" + "</tr>"
       $(tblRow).appendTo("#entrydata tbody");
 });

});

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
<table id= "entrydata" border="1">
<thead>
        <th>ID</th>
        <th>UserName</th>
        <th>Message</th>
    <th>Location</th>
        <th>Time</th>
    </thead>
  <tbody>

   </tbody>
</table>

</div>
</div>

</body>

</html>

$(函数(){
var分录=[];
var dmJSON=”http://api.dailymile.com/entries.json";
$.getJSON(dmJSON,函数(数据){
$.each(数据项、函数(i、f){
var tblRow=“”+”+f.id+++++f.user.username+++++f.message+++++f.location+++f.at++”
$(tblRow).appendTo(“#entrydata tbody”);
});
});
});
身份证件
用户名
消息
位置
时间

感谢您提供有关它为什么不加载json数据的任何帮助。

这是因为AJAX同源策略不允许您从不同域获取数据:

请尝试以下方法:


正如aldux所建议的,跨域访问JSON的一种简单方法是使用JSONP。在您的例子中,服务器(dailymile.com)确实支持JSONP,因此您只需添加一个?回调=?参数添加到您的url,即

var dmJSON = "http://api.dailymile.com/entries.json?callback=?";
$.getJSON( dmJSON, function(data) {
   $.each(data.entries, function(i, f) {
      var tblRow = "<tr>" + "<td>" + f.id + "</td>" + "<td>" + f.user.username + "</td>" + "<td>" + f.message + "</td>" + "<td> " + f.location + "</td>" +  "<td>" + f.at + "</td>" + "</tr>"
       $(tblRow).appendTo("#entrydata tbody");
 });

});
var-dmJSON=”http://api.dailymile.com/entries.json?callback=?";
$.getJSON(dmJSON,函数(数据){
$.each(数据项、函数(i、f){
var tblRow=“”+”+f.id+++++f.user.username+++++f.message+++++f.location+++f.at++”
$(tblRow).appendTo(“#entrydata tbody”);
});
});

感谢您的帮助,我不知道这一点。这非常有用,我很高兴地说,这很有效。谢谢你的帮助!问题回答后不应删除,有人可能会遇到同样的问题并从帖子中获益。不要仅仅因为问题已经解决就故意破坏或删除问题。