我正在尝试使用jQuery ajax
方法解析JSON提要。
如果没有指针,我能看到输出,那么如何获取数据?
而且,我想将前4个新闻作为一个选项显示(我认为在每个功能中,我可以为每个功能做一个?)但作为另一种选择,我想从该提要中随机显示4条新闻。每次它可以显示4个随机新闻。
如果可能的话,我也想隐藏新闻,如果它已经在该会话中读过,但我认为这很复杂,jQuery。
到目前为止代码:
feed.json
{
"News": [{
"title": "Story 1",
"date": "2018-02-02 9:00:00 -0600",
"url": "http:\/\/www.story.com\/",
"description": " Description 1",
"author": "Author 1",
"image": "image1.jpg"
},
{
"title": "Story 2",
"date": "2018-02-02 9:00:00 -0600",
"url": "http:\/\/www.story.com\/",
"description": " Description 2",
"author": "Author 2",
"image": "image2.jpg"
},
{
"title": "Story 3",
"date": "2018-02-02 9:00:00 -0600",
"url": "http:\/\/www.story.com\/",
"description": " Description 3",
"author": "Author 3",
"image": "image3.jpg"
},
{
"title": "Story 4",
"date": "2018-02-02 9:00:00 -0600",
"url": "http:\/\/www.story.com\/",
"description": " Description 4",
"author": "Author 4",
"image": "image4.jpg"
},
{
"title": "Story 5",
"date": "2018-02-02 9:00:00 -0600",
"url": "http:\/\/www.story.com\/",
"description": " Description 5",
"author": "Author 5",
"image": "image5.jpg"
},
{
"title": "Story 6",
"date": "2018-02-02 9:00:00 -0600",
"url": "http:\/\/www.story.com\/",
"description": " Description 6",
"author": "Author 6",
"image": "image6.jpg"
}
]
}
$(document).ready(function() {
var displayResources = $('#newsContent');
displayResources.text('Loading...');
$.ajax({
type: "GET",
url: "feed.json",
success: function(result) {
var output = '';
$.each(result, function(i, item) {
alert(result[i].title);
output += "<li class='item total-4'>";
output += "<a href=" + encodeURIComponent(result[i].title) + "><img src=" + result[i].image + " /></a>";
output += "<h4> <a href=" + result[i].url + " >" + encodeURIComponent(result[i].title) + "</a> </h4>";
output += "</li>";
displayResources.html(output);
});
}
});
});
<div id="news">
<div class="header">
<h2>
<span>News</span>
</h2>
</div>
<ul id="newsContent"></ul>
</div>