从.json URL获取数据，并使用Javascript/JQuery以HTML形式显示

Getting data from a .json URL and displaying it in HTML with Javascript/JQuery

本文关键字：JQuery HTML 显示 Javascript 获取 URL json 数据      更新时间：2023-09-26

我正在尝试从以下位置获取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数据的任何帮助，我们都将不胜感激。

正如aldux所建议的，跨域访问JSON的一种简单方法是使用JSONP。在您的情况下，服务器（dailymile.com）确实支持JSONP，所以您可以简单地添加一个？callback=？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");
 });
});

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

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

试试这个：

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

相关文章：