如何使用jQuery AJAX解析JSON并显示随机文章

时间:2018-02-03 19:51:56

标签: javascript jquery json ajax

我正在尝试使用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>

0 个答案:

没有答案