正在 Node.js 中加载来自 api 的更多内容

Question

所以我刚开始学习 Node.js 并且我正在尝试弄清楚如何在单击按钮时加载更多内容。我想我要么误会了什么，要么我自己感到困惑。

目前代码可能有点乱，因为我已经尝试了很多不同的东西。

至此我有一个首页路由：

//Home
app.get('/', (req, res)=> {
  res.render('homepage');
});

在主页上，我有一个使用 get 调用 /search 路由的搜索栏：

<form action="/search" method="get" id="form">
  <input class="search" name="searchQuery"/>
  <button type="submit">Submit</button>
</form>

然后调用 API 的搜索路由，解析 XML，呈现搜索页面，并发送一些数据：

//Search
app.get('/search', async (req, res) => {
  g_searchQuery = req.query.searchQuery;
  const fetch_response = async (url, query) => {
    try {
      const response = await fetch(url);
      const xml = await response.text();

      xml2js.parseString(xml, (error, result) => {
        var paginations = result.GoodreadsResponse.search[0];
        totalResults = parseInt(paginations['total-results']);
        resultsEnd = parseInt(paginations['results-end']);

        g_resultsEnd = resultsEnd;

        var test = result.GoodreadsResponse.search[0].results[0].work.map( w => {
          let bestBook = w.best_book[0];
          return {
            title: bestBook.title[0],
            author: bestBook.author[0].name,
            image_url: bestBook.image_url[0],
            small_image: bestBook.small_image_url[0],
            original_publication_year: w.original_publication_year[0]._,
          }
        });

        res.render('search', {data : {
          goodReadsResponse : test, 
          searchQuery : query, 
          totalResults : totalResults,
          resultsEnd : g_resultsEnd,
          currentPage : g_currentPage
        }});
      res.end();
    });
    }
  };

  fetch_response(goodreadsapi + '?key=' + goodreadskey + '&q=' + g_searchQuery + '&page=' + g_currentPage, g_searchQuery);
});

搜索页面呈现数据并有一个加载更多按钮，使用 Fetch api 调用 /search POST:

<body>
<h1>You searched for: <%= data.searchQuery %></h1>

<% if(data.goodReadsResponse) { %>
  <ul class="data-container">
    <%= data.totalResults %>
    <%= data.currentPage %>
    <% data.goodReadsResponse.forEach(function(book) { %>
      <li>
        <span><%= book.title %></span>
        <span><%= book.author %></span>
        <span><img src="<%= book.image_url %>"/></span>
        <span><img src="<%= book.small_image %>"/></span>
        <span><%= book.original_publication_year %></span>
      </li>
    <% }); %>
  </ul>
  <% if(data.resultsEnd <= data.totalResults) { %>
    <div class="load-more__container">
      <button class="load-more__button" type="button">Load More</button>
    </div>
  <% } %>
<% } %>
</body>

<script type="text/javascript">
  window.addEventListener('load', function() {
    const loadMore = document.querySelector('.load-more__button');

    if(loadMore) {
      loadMore.addEventListener('click', (event) => {
        event.preventDefault('Load More');
                    
        fetch('/search', {
          method : 'POST'
        })
      });
    }
  });
</script>

然后这是我卡住和困惑的部分。我有一个用于加载更多按钮的 app.post /search 路由，但我不确定将数据传递给 route/if 的最佳方式是什么，我什至需要这样做。

我的想法是，我需要将我在/search app.get 路由中通过render 传递的大部分数据传递给app.post /search 路由向当前页面添加1，然后追加我从 API 获得的数据到以前的数据，然后使用更新后的数据呈现页面。但是我有点卡住了。

这是我的回购协议，它不是 1:1 因为我试图清理一些问题的东西。

如有任何帮助，我们将不胜感激，谢谢。

Answer 1

让bestBook = w.best_book[0];

在上面的行中，考虑到 w.best_book 是一个书籍列表，你可以循环它并将所有书籍保存在一个单独的变量中，然后渲染它当按下 加载更多 按钮时。

正在 Node.js 中加载来自 api 的更多内容

Loading more content from api in Node.js

javascript

ejs

fetch

node.js

express