ajax渲染页面，实现无限滚动

要实现无限滚动加载的功能，可以使用jQuery库配合AJAX来从服务器请求新数据，并将其动态添加到页面上。以下是一个简单的示例：

HTML部分：

<div id="content">
  <!-- 动态内容将被添加到这里 -->
</div>
 
<div id="loading">加载中...</div>

JavaScript部分（使用jQuery）：

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() === $(document).height()) {
    loadMoreData();
  }
});
 
var page = 1;
function loadMoreData() {
  $('#loading').show();
  $.ajax({
    url: 'server.php', // 服务器端脚本，返回新数据
    type: 'get',
    data: { page: page },
    success: function(data) {
      if (data) {
        $('#content').append(data); // 将新数据添加到页面
        page++;
      }
      $('#loading').hide();
    },
    error: function() {
      $('#loading').html('出现错误！');
    }
  });
}

服务器端（server.php）：

<?php
// 假设使用PHP和MySQL
 
$page = $_GET['page'];
$limit = 10; // 每页显示的数据量
$offset = ($page - 1) * $limit;
 
// 连接数据库...
// 查询数据库获取新数据
$query = "SELECT * FROM your_table LIMIT $offset, $limit";
 
// 执行查询并生成HTML...
// 假设 $result 是从数据库查询到的数据
while($row = mysqli_fetch_assoc($result)) {
    echo "<div>".$row['your_column']."</div>";
}
 
// 关闭数据库连接...
?>

确保服务器端的脚本能返回正确的数据，并且在实际使用中根据需要调整AJAX请求的参数和服务器端的查询逻辑。