求助：基于Ajax和JavaScript实现OpenFDA API数据滚动分页加载

我来帮你搞定这个无限滚动加载的问题！你现在用OpenFDA API每次只拉5条数据，想要实现滚动到底部自动加载下一页直到凑够1000条，对吧？咱们一步步来解决：

核心思路拆解 #

OpenFDA的药品标签API支持分页参数，咱们可以用limit（每次加载条数）和skip（跳过已加载条数）来实现分页；再结合页面滚动监听，判断用户滚动到底部时自动发起下一页请求，同时要避免重复请求。

完整实现代码 #

首先是HTML表格结构：

<table id="drugTable" border="1" cellpadding="8">
  <thead>
    <tr>
      <th>药品品牌名</th>
      <th>生产厂家</th>
      <th>适应症（摘要）</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 数据会动态追加到这里 -->
  </tbody>
</table>

然后是JavaScript逻辑：

// 初始化状态变量
let loadedCount = 0; // 已加载的数据条数
const pageSize = 5; // 每次请求的条数（你原来的设置）
const totalTarget = 1000; // 目标加载总条数
let isLoading = false; // 防止重复请求的锁

// 加载下一页数据的函数
function loadNextBatch() {
  // 如果正在加载，或者已经加载够目标条数，直接返回
  if (isLoading || loadedCount >= totalTarget) return;

  isLoading = true;
  const skipCount = loadedCount; // 跳过已经加载的条数

  jQuery.ajax({
    url: `https://api.fda.gov/drug/label.json?limit=${pageSize}&skip=${skipCount}`,
    method: 'GET',
    success: function(response) {
      const tableBody = document.getElementById('tableBody');

      // 遍历返回的每条数据，生成表格行
      response.results.forEach(drug => {
        // 处理OpenFDA返回的数组字段，避免空值报错
        const brandName = drug.openfda?.brand_name?.[0] || '无品牌名';
        const manufacturer = drug.openfda?.manufacturer_name?.[0] || '未知厂家';
        const indication = drug.indication_and_usage?.[0] 
          ? drug.indication_and_usage[0].substring(0, 120) + '...' 
          : '无适应症信息';

        // 创建表格行并追加到tbody
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${brandName}</td>
          <td>${manufacturer}</td>
          <td>${indication}</td>
        `;
        tableBody.appendChild(row);
      });

      // 更新已加载条数，释放加载锁
      loadedCount += response.results.length;
      isLoading = false;

      // 如果已经加载完所有目标数据，移除滚动监听
      if (loadedCount >= totalTarget) {
        window.removeEventListener('scroll', handleScroll);
        console.log('已加载完1000条数据');
      }
    },
    error: function(xhr, status, err) {
      console.error('加载数据失败:', err);
      isLoading = false; // 请求失败也要释放锁
    }
  });
}

// 滚动监听函数：判断是否滚动到页面底部附近
function handleScroll() {
  const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
  const totalDocumentHeight = document.documentElement.scrollHeight;

  // 当滚动到距离底部100px以内时，触发加载
  if (scrollPosition + windowHeight >= totalDocumentHeight - 100) {
    loadNextBatch();
  }
}

// 初始化：加载第一页数据
loadNextBatch();
// 添加滚动监听
window.addEventListener('scroll', handleScroll);

关键注意点 #

1. 分页参数的正确使用：skip参数是核心，每次请求都要设置为已经加载的条数，确保不会重复获取数据。
2. 空值处理：OpenFDA返回的部分字段是数组（比如brand_name），而且有些药品可能缺少某些字段，一定要用可选链?.和默认值避免报错。
3. 防止重复请求：isLoading变量就像一把锁，请求未完成时不会触发新的请求，避免API被频繁调用。
4. 滚动触发时机：设置距离底部100px就触发加载，让用户感觉更流畅，不会等到完全滚动到底部才加载。

问题排查小贴士 #

如果还是有问题，可以打开浏览器的开发者工具：

• 看Network标签，检查API请求的状态码（正常是200）和返回的数据是否正确；
• 看Console标签，有没有报错信息，比如字段不存在的错误；
• 确认OpenFDA API的调用限制：虽然它支持CORS，但要注意请求频率，不过1000条数据分200次请求（每次5条）是没问题的。

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