javascript - ajax 调用本地自定义 JSON 文件以使用 JS 创建 Bootstrap 4 卡？

Question

目标是拥有一个包含 bootstrap 4 卡的页面，其中包含图像、标题、一些文本和阅读更多按钮。 (本质上是一个包含博客文章列表的博客页面)。

这必须在没有服务器的情况下并且完全在本地完成。维护不是问题，这是个人网站。

<小时/>

所以我的思考过程是:

• 有一个像这样的手工制作的 JSON 文件:(存储在 /JSON/bloglist.json/ 中)

  {
  articles: [
      {title: "blog article 1", url: "/blog/blog-article-1.html", image: "/images/blog/blog-article-1.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a", "b", "c"]},
      {title: "blog article 2", url: "/blog/blog-article-2.html", image: "/images/blog/blog-article-2.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a", "c"]},
      {title: "blog article 3", url: "/blog/blog-article-3.html", image: "/images/blog/blog-article-3.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a"]},
  ]
  

  }

• 然后让 ajax 调用 JSON 文件

• 然后让 javascript 使用 Shuffle.JS 生成可以过滤、搜索并使用(加载更多帖子)按钮动态加载的卡片。

<小时/>

从文档中我可以弄清楚如何从 API 加载更多内容，我还可以弄清楚如何使用 Shuffle.JS 创建漂亮的图像网格。

我不知道的是:

• 如何将 Shuffle.JS 与 Bootstrap 4 卡一起使用

• 如何使用Ajax调用调用本地JSON文件

Answer 1

也许像这样:

$.getJSON('/JSON/bloglist.json/', function( data ) {
    for(var key in data.articles){
         var out='<div class="card">';
              out+='<div class="card-header">'+data.articles[key].title+'</div>';
              out+='<img class="card-img-top" src="'+data.articles[key].image+'" alt="...">';

               out+='<div class="card-body">';
               out+=data.articles[key].exerpt;
               out+='<div class="cls-for-load"></div>';
               out+='<button class="btn btn-primary" onclick="$(this).parent().find(\'.cls-for-load\').load( \''+data.articles[key].url+'\');">more...</button>';
               out+='</div>';
               out+=
            out+='</div>';
            $('body').append(out);
    }
});