网站Load More按钮点击后无法渲染额外项目内容的问题求助

核心问题及修复步骤 #

1. 前端错误解析响应内容 #

后端返回的是纯HTML字符串，但前端代码错误地尝试用JSON.parse()解析它，导致无法获取有效内容。

修复代码（前端JS部分）：
将AJAX的success回调函数修改为：

success: function(response) {
  // 直接将后端返回的HTML追加到容器中
  projectContainer.innerHTML += response;

  // 更新URL中的页码
  updateURL(nextPage);

  // 无更多项目时隐藏按钮
  if (!response.trim()) {
    loadMoreButton.style.display = 'none';
  }
}

2. 后端分页逻辑错误 #

原代码中对openProjects和otherProjects分别执行skip(skip)，再合并后再次slice，导致分页逻辑混乱，无法正确获取对应页码的项目。

修复代码（后端JS部分）：

app.get('/loadmore', async function(req, res) {
    console.log('Load More route accessed');
  
    const page = parseInt(req.query.page) || 1;
    const skip = (page - 1) * PAGE_SIZE;
  
    // 先获取所有符合条件的项目并各自排序
    const openProjects = await projectSchema
      .find({ Status: 'open', PaidFor: true })
      .sort({ ListedDate: -1 });
  
    const otherProjects = await projectSchema
      .find({ Status: { $ne: 'open' }, PaidFor: true })
      .sort({ ListedDate: -1 });
  
    // 合并项目（保持open项目在前）
    const allProjects = [...openProjects, ...otherProjects];
  
    // 执行正确的分页：跳过skip条，取PAGE_SIZE条
    const projects = allProjects.slice(skip, skip + PAGE_SIZE);
  
    // 确保getTimePassed函数已在后端定义
    function getTimePassed(date) {
      const now = new Date();
      const diffInMs = now - new Date(date);
      const diffInSeconds = Math.floor(diffInMs / 1000);
      const diffInMinutes = Math.floor(diffInSeconds / 60);
      const diffInHours = Math.floor(diffInMinutes / 60);
      const diffInDays = Math.floor(diffInHours / 24);

      if (diffInDays > 0) return `${diffInDays} day${diffInDays > 1 ? 's' : ''} ago`;
      if (diffInHours > 0) return `${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`;
      if (diffInMinutes > 0) return `${diffInMinutes} minute${diffInMinutes > 1 ? 's' : ''} ago`;
      return 'Just now';
    }
  
    // 生成项目HTML
    const projectHTML = projects
      .map(project => {
        return `
          <section class="box" style="margin: 1rem;">
            <a href="/project/${project.UniqueID}">
              <article class="media" style="background: white;">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <span style="font-size: 2rem; color: #2d2d2d;margin-left: -2px;">Earn <strong style="color: #5cb85c">$${project.DollarAmount.toLocaleString()}!</strong></span>
                      <br>
                      <span><small><i class="fa-solid fa-clock" style="margin-right: 0.2rem;"></i> Listed ${getTimePassed(project.ListedDate)}</small></span>
                      ${project.Status === 'open' ? '<div class="status regular tag" style=""><p style="color:black">Open</p></div>' : project.Status === 'claimed' ? '<div class="status claimed tag">Claimed</div>' : project.Status === 'closed' ? '<div class="status closed tag">Closed</div>' : project.Status === 'cancelled' ? '<div class="status closed tag">Cancelled</div>' : project.Status === 'completed' ? '<div class="status claimed tag">Completed</div>' : ''}
                      <h3>${project.Title}</h3>
                    </p>
                    <a href="/project/${project.UniqueID}">
                      <p>${project.Description}</p>
                    </a>
                    <div class="tags">
                      ${project.Tags.map(tag => `<div class="tag">${tag}</div>`).join('')}
                    </div>
                    <nav class="level is-mobile">
                      <div class="level-left">
                        <small>
                          <button style="border-radius: 5px;" class="button bot_right is-small bountybutton has-text-black">View More</button>
                        </small>
                      </div>
                    </nav>
                  </div>
                </div>
              </article>
            </a>
          </section>
        `;
      })
      .join('');
  
    res.send(projectHTML);
  });

3. 移除冗余的按钮点击绑定 #

HTML按钮中同时存在onclick="loadMoreProjects()"和JS中的addEventListener绑定，但loadMoreProjects函数未定义，会导致控制台报错。

修复：
修改HTML中的按钮代码，移除onclick属性：

<button id="loadMoreButton" style="margin: 1rem; display: flex; justify-content: center;" class="button is-primary is-medium">Load More</button>

4. 统一前端页码变量 #

前端全局var page = 1与事件回调中的const page = getPageNumberFromURL()重复，建议移除全局变量，直接通过getPageNumberFromURL()获取当前页码。

额外检查项 #

• 确认后端的PAGE_SIZE常量与前端的PAGE_SIZE值一致（当前均为10）
• 打开浏览器控制台，查看是否有报错信息，帮助定位其他潜在问题

内容的提问来源于stack exchange，提问作者FattyDev1