如何将路由获取的JSON数据传递给jQuery实现无限滚动？

1. 拆分路由，区分页面渲染与数据接口 #

当前问题核心是/crypto路由仅返回JSON，无法加载页面。需拆分两个独立路由：

• 一个负责渲染EJS页面（用户访问时加载页面结构）
• 一个专门提供JSON数据（供前端AJAX调用获取数据）

修改后的Express路由代码：

// 渲染EJS页面的路由
app.get("/crypto", function(req, res){
  res.render("crypto"); // 替换为你的EJS文件名
});

// 提供JSON数据的API路由
app.get("/api/crypto", function(req, res){
  axios.get('{apiURL}')
  .then(response => {
    // axios响应的实际数据在response.data属性中
    res.json(response.data);
  }).catch(error => {
    res.status(500).json({error: error.message});
  })
});

2. 修正前端jQuery代码 #

• 调整请求地址为新的API路由/api/crypto
• 修正axios返回数据的处理逻辑（原代码直接遍历data会报错，需取response.data）
• 完善无限滚动逻辑，添加滚动监听、加载状态控制，避免重复请求

修正后的jQuery代码：

let loadingData = false;
const loading = $("#loading"); // 假设页面存在加载提示元素

function fetchMoreData() {
  if (loadingData) return; // 防止重复请求
  loadingData = true;
  loading.show();

  $.getJSON('/api/crypto', function(data) {
    data.forEach(crypto => {
      const cryptoName = crypto.name;
      $('.lists').append(`<p class="crypto-name">${cryptoName}</p>`);
    });
    loading.hide();
    loadingData = false;
  }).fail(function(jqXHR, textStatus, errorThrown) {
    console.error('Error fetching crypto data:', textStatus, errorThrown);
    loading.hide();
    loadingData = false;
  });
}

// 监听滚动事件，触发无限加载
$(window).scroll(function() {
  // 滚动到距离底部100px时触发加载
  if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
    fetchMoreData();
  }
});

// 页面初始化时加载第一波数据
fetchMoreData();

3. 清理冗余的body-parser配置 #

Express 4.16+已内置body解析功能，无需额外引入body-parser包，保留以下配置即可：

app.use(express.json()); // JSON格式请求体解析
app.use(express.urlencoded({ extended: true })); // URL编码请求体解析

4. EJS页面基础要求 #

确保crypto.ejs页面包含：

• 数据容器：<div class="lists"></div>
• 加载提示元素：<div id="loading" style="display:none;">加载中...</div>
• jQuery引入（可使用CDN或本地静态文件）

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