更新

Question

怎么了？我是Web开发人员的新手，并开始为漫画创建数据库！所以，开始我创建一个带有网格的php文件，我需要一个带漫画数据库的json文件导入到卡片中：

“图像”
“name”
“category”
“downlaod_link”

！这是一张简单的卡片！

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      <div class="card h-100">
        <a href=" |manga_link| "><img class="card-img-top" src=" |manga_img_src| "></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#"> |manga_title| </a>
          </h4>
          <p class="card-text"> |manga_category| </p>
        </div>
      </div>
    </div>

！这是我的json文件！我只放置必要的行，因为它是一个大文件！

[
    {
    "name": "example name",
    "author": " example author",
    "category": "example category",
    "img_link": "example.com/dist/img/junjo_cover.png"
    "manga_link": "example.com/junjo.html"
    },
]

现在我需要将这个json文件链接到我的卡网格！

我怎么能这样做？ Jquery，Ajax？以及如何？

我从网络example card grib 4 col

中选择了一个示例

Answer 1

更新

“我可以使用外部json文件吗？@ zer00ne” - RITER

确实，有很多方法可以做到这一点。我使用$.getJSON()和外部JSON文件data.json更新了此演示。请记住，同源政策适用。请查看： Plunker 。虽然该演示无法完全作为Stack Snippet运行，但根据站点策略，它将作为Demo 2发布。

对象的键与HTML示例中的键不匹配，因此我进行了相应的调整。这个特殊的JSON不需要解析，所以这里提供的是细分：

[ //.................................................1st level is an array 
    { //.............................................2nd level is an object
    "name": "example name", //.......................Begin key:value pairs
    "author": " example author",
    "category": "example category",
    "img_link": "example.com/dist/img/junjo_cover.png"
    "manga_link": "example.com/junjo.html"//..........End key:value pairs
    },
]

为此对象分配一个变量，我将内容更改为不太通用的内容。

var manga = [{
  "name": "Cowboy Bebop: Shooting Star Volume One",
  "author": "Cain Kuga",
  "category": "Neo-noir, space Western",
  "img_link": "https://images-eu.ssl-images-amazon.com/images/I/51R00EADHML._SY291_BO1,204,203,200_QL40_.jpg",
  "manga_link": "https://web.archive.org/web/20030405062538/http://www.tokyopop.com/dbpage.php?page=product&productid=1620"
}];

第一级是一个数组：

manga[0]

第二级是一个对象：

manga[0].

要查找类别键的值：

manga[0].category
// "Neo-noir, space Western"

HTML输入为Template Literal，这是类固醇上的文字字符串。如果我们使用文字字符串，我们将连接键值，如下所示：

'<p class="card-text">'+ manga[0].category +'</p>'

使用模板文字我们插入键值：

 `<p class="card-text">${manga[0].category}</p>`

要将模板文字渲染为HTML，我们可以使用innerHTML或更高级insertAdjacentHTML()的东西，它是类固醇的innerHTML。

演示1

var manga = [{
  "name": "Cowboy Bebop: Shooting Star Volume One",
  "author": "Cain Kuga",
  "category": "	Neo-noir, space Western",
  "img_link": "https://images-eu.ssl-images-amazon.com/images/I/51R00EADHML._SY291_BO1,204,203,200_QL40_.jpg",
  "manga_link": "https://web.archive.org/web/20030405062538/http://www.tokyopop.com/dbpage.php?page=product&productid=1620"
}];

var HTML = `<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      <div class="card h-100">
        <a href="${manga[0].manga_link}"><img class="card-img-top" src="${manga[0].img_link}"></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#">${manga[0].name}</a>
          </h4>
          <p class="card-text">${manga[0].category}</p>
        </div>
      </div>
    </div>`;

document.body.insertAdjacentHTML('beforeend', HTML);

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

演示2

不起作用，根据网站政策发布。请参阅此功能**Plunker 。**

$.getJSON("data.json", function(manga) {



  var HTML = `<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      <div class="card h-100">
        <a href="${manga[0].manga_link}">
          <img class="card-img-top" src="${manga[0].img_link}">
        </a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#">${manga[0].name}</a>
          </h4>
          <p class="card-text">${manga[0].category}</p>
        </div>
      </div>
    </div>`;

  document.getElementById('dock').insertAdjacentHTML('beforeend', HTML);

});

/* Imagine this as data.json file 

[{
	"name": "Cowboy Bebop: Shooting Star Volume One",
	"author": "Cain Kuga",
	"category": "Neo-noir, space Western",
	"img_link": "https://images-eu.ssl-images-amazon.com/images/I/51R00EADHML._SY291_BO1,204,203,200_QL40_.jpg",
	"manga_link": "https://web.archive.org/web/20030405062538/http://www.tokyopop.com/dbpage.php?page=product&productid=1620"
}]

*/

<!DOCTYPE html>
<html>

<head>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
</head>

<body>




  <section id='dock'></section>




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
  <script src='script.js'></script>
  <script>
  </script>
</body>

</html>

将JSON数据获取到HTML文件

1 个答案:

更新

演示1

演示2