我已经搭建了一个系统,可以解析JSON并使用一些简单的CSS进行渲染。但是,我使用了一个变量来实现这个功能。我不想在脚本中输出数据。相反,我想从本地或远程URL获取数据。
<script type='text/javascript'>
$(window).load(function(){
var data={"users":[
{
"title":"Dieter Rams Video",
"content":"Only text will go here. Limited to 100 characters per panel.",
"url":"http://website.me/video.php?=89697976996",
},
{
"title":"IoT Ecosystem",
"content":"Villalobos",
"url":"http://google.com",
},
{
"title":"IoT Ecosystem",
"content":"Villalobos",
"url":"http://google.com",
},
{
"title":"IoT Ecosystem",
"content":"Villalobos",
"url":"http://google.com",
},
{
"title":"IoT Ecosystem",
"content":"Villalobos",
"url":"http://google.com",
},
{
"title":"IoT Ecosystem",
"content":"Villalobos",
"url":"http://google.com",
},
{
"title":"IoT Ecosystem",
"content":"Villalobos",
"url":"http://google.com",
}
]}
$(data.users).each(function() {
var output = "<a href='" + this.url + "'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-body'><h4>" + this.title + "</h4><p>" + this.content + "</p></div></div></div></a>";
$('#feed').append(output);
});
});
</script>
如何从URL源中获取JSON数据并像现在一样输出?
更新
<script type='text/javascript'>
var data;
$.ajax({
dataType: "json",
url: `file://${__dirname}/data.json`,
data: data,
success: function(data) {
data = data;
}
});
$(window).load(function(){
$(data).each(function() {
var output = "<a href='" + this.url + "'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-body'><h4>" + this.title + "</h4><p>" + this.content + "</p></div></div></div></a>";
$('#feed').append(output);
});
});
</script>