jQuery结合AJAX之在页面滚动时从服务器加载数据

jQuery结合AJAX可以实现在页面滚动时从服务器加载数据，这在实现无限滚动的时候非常有用。

下面是具体的完整攻略：

1. 引入jQuery库

首先在页面中引入jQuery库，可以使用CDN或者本地文件。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 监听页面滚动事件

使用jQuery绑定页面滚动事件，然后进行处理。

$(window).on("scroll", function() {
  // 处理代码
});

3. 判断页面是否滚动到底部

在滚动事件里面，需要判断页面是否滚动到底部，如果滚动到底部则触发加载操作。可以使用如下代码判断：

if ($(window).scrollTop() + $(window).height() == $(document).height()) {
  // 到底部了，可以触发加载操作
}

4. 发送AJAX请求加载数据

一旦判断滚动到底部，就可以通过AJAX请求加载数据。使用jQuery的$.ajax方法可以发送异步HTTP请求，向服务器获取数据。

$.ajax({
  url: "http://example.com/data",
  type: "get",
  dataType: "json",
  data: { page: currentPage },
  success: function(data) {
    // 处理获取到的数据
  },
  error: function(xhr, status, error) {
    // 处理错误
  }
});

这里的例子中，发送GET请求获取数据，并且带上了一个参数page，表示当前加载的页面。当请求成功后，会进入success回调函数，并传递获取到的数据。

示例1

$(window).on("scroll", function() {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    // 到底部了，可以触发加载操作
    $.ajax({
      url: "http://example.com/data",
      type: "get",
      dataType: "json",
      data: { page: currentPage },
      success: function(data) {
        // 处理获取到的数据
        console.log(data); // 输出返回的数据
        currentPage++;
      },
      error: function(xhr, status, error) {
        // 处理错误
        console.error(error);
      }
    });
  }
});

这个例子中，当页面滚动到底部时，会向服务器发送一个GET请求，请求地址为http://example.com/data，并且带上一个参数page，表示当前加载的页面。当请求成功后，会输出获取到的数据，并且将currentPage加1，下一次请求页面将会发送page=2的参数。

示例2

var loading = false;
$(window).on("scroll", function() {
  if ($(window).scrollTop() + $(window).height() == $(document).height() && !loading) {
    // 到底部了，且上一次加载已经完成，可以触发加载操作
    loading = true; // 设置loading状态，避免重复加载
    $.ajax({
      url: "http://example.com/data",
      type: "get",
      dataType: "json",
      data: { page: currentPage },
      success: function(data) {
        // 处理获取到的数据
        console.log(data); // 输出返回的数据
        currentPage++;
        loading = false; // 加载完成，重置loading状态
      },
      error: function(xhr, status, error) {
        // 处理错误
        console.error(error);
        loading = false; // 加载完成，重置loading状态
      }
    });
  }
});

这个例子中，增加了一个loading变量用来控制是否已经处于加载中，避免重复加载。当加载完成后，将loading变量重置。这样可以避免用户在上一次加载完成前重复滑动到底部，重复加载数据。

以上是使用jQuery结合AJAX在页面滚动时从服务器加载数据的完整攻略，希望能对你有所帮助。