从.json URL获取数据并使用Javascript / JQuery以HTML格式显示数据 [英] Getting data from a .json URL and displaying it in HTML with Javascript/JQuery
问题描述
我试图从以下网站获取json数据：
http://api.dailymile.com /entries.json
然后我希望在表格中显示这些数据。下面的代码在json链接指向我的计算机上的一个文件时起作用，但当引用URL时不起作用。
< ; HTML>
< head>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js> < /脚本>
< script>
$ b $（函数（）{
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 =entrydataborder =1>
< thead>
< th> ID< / th>
< th> UserName< / th>
< th>消息< / th>
< th>位置< / th>
< th>时间< / th>
< / thead>
< tbody>
< / tbody>
< / table>
< / div>
< / div>
< / body>
< / html>
对于为什么不加载json数据的任何帮助表示赞赏。
$根据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）;
}）;
}）;
I am trying to get json data from: http://api.dailymile.com/entries.json Then I wish to display this data in a table. The below code works when the json link points to a file already on my computer, but not when referring to a 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>
Any help as to why it won't load the json data is appreciated.
As aldux suggests, a simple way of accessing JSON cross-domain is to use JSONP. In your case, the server (dailymile.com) does support JSONP, so you can simply add a ?callback=? parameter to your url, i.e.
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");
});
});
这篇关于从.json URL获取数据并使用Javascript / JQuery以HTML格式显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
