页面向下滚动ajax获取数据的实现方法(兼容手机

页面滚动加载数据：AJAX获取数据实现方法（手机兼容版）

在现今的网络浏览体验中，滚动页面时自动加载更多数据已经成为了一种常见的交互方式。这种技术对于提升用户体验和页面性能有着显著的优势。本文将为大家介绍一种页面向下滚动时通过AJAX获取数据的实现方法，同时兼容手机等移动设备。

我们需要监听页面的滚动事件。当页面滚动到底部时，触发一个函数来加载更多数据。我们可以使用jQuery来实现这一点：

```javascript

$(window).scroll(function () {

var scrollTop = $(this).scrollTop(); // 当前滚动的距离顶部距离

var scrollHeight = $(document).height(); // 整个文档的高度

var windowHeight = $(this).height(); // 当前浏览器窗口的高度

// 判断是否滚动到页面底部

if (scrollTop + windowHeight >= scrollHeight) {

loadPromotions(); // 加载更多数据的函数

}

});

```

接下来，我们需要定义加载数据的函数`loadPromotions`。这个函数会检查是否有更多的数据可以加载，然后通过AJAX向后端请求数据。

```javascript

var page = 1; // 页码

var morAvaliable = true; // 标识是否还有数据可以加载

function loadPromotions() {

if (morAvaliable) {

var href = location.href.split('?')[0]; // 获取当前URL（不带查询参数）

var pageSize = 5; // 每次加载的数据量

page++; // 增加页码

// 通过POST方式向后端请求数据

$.post(href, { pageNo: page, pageSize: pageSize }, function (data) {

// 处理返回的数据

if (data.length) { // 如果返回的数据存在

var html = ''; // 用于存储HTML片段的变量

$.each(data, function (i, list) { // 遍历返回的数据列表

html += '