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

【问题标题】：Getting data from a .json URL and displaying it in HTML with Javascript/JQuery从 .json URL 获取数据并使用 Javascript/JQuery 在 HTML 中显示
【发布时间】：2023-03-27 07:57:02
【问题描述】：

我正在尝试从以下位置获取 json 数据： http://api.dailymile.com/entries.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>

感谢任何关于为什么它不会加载 json 数据的帮助。

【问题讨论】：

问题在回答后不应删除，有人可能会遇到同样的问题并从帖子中受益。
不要仅仅因为问题已经解决就破坏或删除问题。

标签： javascript html json url

【解决方案1】：

正如 aldux 所建议的，访问 JSON 跨域的一种简单方法是使用 JSONP。在您的情况下，服务器（dailymile.com）确实支持 JSONP，因此您可以简单地添加一个 ?callback=?您的网址的参数，即

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");
 });

});

【讨论】：

这非常有用，我很高兴地说它有效。感谢您的帮助！

【解决方案2】：

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

http://en.wikipedia.org/wiki/Same_origin_policy

试试这个：

http://en.wikipedia.org/wiki/JSONP

【讨论】：

感谢您的帮助，我不知道这个。