如何在pug和javascript中滚动和加载更多的json数据？

div#data-container

$(document).ready(function() {
  var page = 1; // 当前页数
  var limit = 10; // 每页显示的数据量

  function loadData() {
    $.ajax({
      url: '/api/data', // 替换为你的数据接口URL
      type: 'GET',
      data: { page: page, limit: limit },
      success: function(response) {
        // 将获取到的JSON数据添加到数据容器中
        $('#data-container').append(response.data);
        page++; // 增加页数
      },
      error: function(error) {
        console.log(error);
      }
    });
  }

  // 页面加载时加载第一页数据
  loadData();

  // 当滚动到页面底部时，加载更多数据
  $(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
      loadData();
    }
  });
});

const express = require('express');
const app = express();

// 定义数据接口
app.get('/api/data', function(req, res) {
  const page = req.query.page; // 获取当前页数
  const limit = req.query.limit; // 获取每页显示的数据量

  // 根据页数和数据量，从数据库或其他数据源获取相应的JSON数据
  // ...

  // 假设你已经获取到了JSON数据，将其发送回客户端
  const jsonData = { data: [{}, {}, ...] }; // 替换为你的JSON数据
  res.send(jsonData);
});

// 启动服务器
app.listen(3000, function() {
  console.log('Server is running on port 3000');
});