Question

我正在尝试创建一个在线书店网站，并且由于不必从数据库中获取数据，因此我考虑过从JSON文件加载书对象。我应该做的是：从JSON文件加载对象并动态构建页面（例如，一个包含所有可用书籍列表的页面，另一个包含带有过滤器的搜索栏的页面等等）。我最近开始学习HTML，CSS，JS（和Node.JS），因此我不确定我可以做什么，也不能做什么。我已经在线阅读了可以在HTML文件中使用JQuery从URL加载JSON的信息，但是我仍然想知道：是否有可能在JS文件中加载JSON内容（也许通过path和fs作为在Node.JS中）并像动态内容一样使用它（例如，通过.innerHTML）？

Answer 1

您不需要服务器端代码。

假设您在与JavaScript文件相同的目录中有一个名为books.json的JSON文件：

{
  "books": [
    {"title": "book1", "author": "author1"},
    {"title": "book2", "author": "author2"}
  ]
}

还有一个index.html：

<div id="books"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="script.js"></script>

在您的script.js中，您可以使用jQuery这样加载JSON：

// global variable
var data;

$.get('books.json', function(d) {
  data = JSON.parse(d);
  // loop through all books
  data.books.forEach(function(b) {
    // now you can put every book in your <div>
    $("#books").append(`<div><h2>${b.title}</h2><p>${b.author}</p></div>`);
  });
});

搜索功能可能如下：

html：

<input id="input" /><button onclick="search()">search</button>

javascript：

function search() {
  $("#books").html("");
  let search = $("#input").val();
  // filter the data
  let filtered = $(data).filter(function (i,b){return b.title == search || b.author == search});
  filtered.books.forEach(function(b) {
    $("#books").append(`<div><h2>${b.title}</h2><p>${b.author}</p></div>`);
  });
}

通过JS将内容从JSON文件动态加载到HTML页面

1 个答案: