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

实现页面向下滚动 AJAX 获取数据的方法，常用于网站无限滚动加载更多内容的功能实现。下面是实现此功能的完整攻略：

技术选型

实现页面向下滚动 AJAX 获取数据，需要使用前端技术和后端技术协同完成。前端技术主要使用 JavaScript 和 jQuery，后端技术可以选择 PHP、Java、Python等。

实现步骤

1. 确定页面上需要进行下拉刷新的区域，一般是数据展示区域，如ul、table、div等块状或列表状的元素。

2. 如下面所示，当页面下拉到合适的距离，触发事件，发送 AJAX 请求获取数据。

$(window).scroll(function() {

    if($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {

        //发送AJAX请求
        $.ajax({...})
    }
});

1. 在 AJAX 回调函数中，对获取到的数据进行处理，并将处理后的数据添加到页面上展示。

$.ajax({
    url: 'data.php',
    type: 'POST',
    data: {page: page},
    dataType: 'json',
    success: function(data) {
        if (!$.isEmptyObject(data)) {
            //对数据进行处理
            var html = "";
            $.each(data, function(key, value) {
                html += "<li>" + value + "</li>";
            });
            //在页面上展示数据
            $('ul').append(html);
            page++;
        }
    }
});

以上代码中，ajax 请求中的 data.php 即为后端代码，后端需要将分页加载的数据返回给前端。

1. 在后端代码中，需要接收分页参数 page 的值，根据 page 值查询数据库中对应的数据并返回。具体实现代码如下：

$page = $_POST['page'];
$number = 10;
$start = $page * $number;

$sql = "SELECT * FROM data LIMIT $start, $number";
$result = $conn->query($sql);
$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row['name'];
}
echo json_encode($data);

示例说明

示例1：

一个ul列表展示很多商品信息，每次展示10条数据，实现页面向下滚动加载更多。展示数据的页面代码如下：

<ul class="goods-list">
    <?php foreach ($goods_data as $key=>$val) { ?>
        <li>
            <p><?php echo $val['name']; ?></p>
            <p><?php echo $val['price']; ?></p>
        </li>
    <?php } ?>
</ul>

前端 JavaScript 代码如下：

var page = 0;
$(window).scroll(function () {
    if ($(document).height() - $(this).scrollTop() - $(this).height() <= 5) {
        page++;
        var url = '/goods.php';
        $.ajax({
            url: url,
            data: {
                p:page
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                if (data.length > 0) {
                    var list = "";
                    $.each(data, function (key, value) {
                        list += '<li><p>' + value.name + '</p><p>' + value.price + '</p></li>';
                    });
                    $(".goods-list").append(list);
                } else {
                    alert("没有数据了！");
                }
            }
        });
    }
});

后端PHP代码如下：

$p = $_GET['p'];
$number = 10;
$start = $p * $number;

$sql = "SELECT * FROM goods LIMIT {$start}, {$number}";
$result = $db->query($sql);
$data = [];
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = [
        "name" => $row['name'],
        "price" => $row['price']
    ];
}
echo json_encode($data);

示例2：

一个div里面展示不定数量的图片，每次展示8张图片，实现页面向下滚动加载更多。展示数据的页面代码如下：

<div class="photo-list">
    <?php foreach ($photo_data as $key=>$val) { ?>
        <img src="<?php echo $val['url'] ?>">
    <?php } ?>
</div>

前端 JavaScript 代码如下：

var page = 0;
$(window).scroll(function () {
    if ($(document).height() - $(this).scrollTop() - $(this).height() <= 5) {
        page++;
        var url = '/photos.php';
        $.ajax({
            url: url,
            data: {
                p:page
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                if (data.length > 0) {
                    var list = "";
                    $.each(data, function (key, value) {
                        list += '<img src="' + value.url + '">';
                    });
                    $(".photo-list").append(list);
                } else {
                    alert("没有数据了！");
                }
            }
        });
    }
});

后端 PHP 代码如下：

$p = $_GET['p'];
$number = 8;
$start = $p * $number;

$sql = "SELECT * FROM photos LIMIT {$start}, {$number}";
$result = $db->query($sql);
$data = [];
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = [
        "url" => $row['url'],
    ];
}
echo json_encode($data);

以上两个示例可以根据具体的实际情况进行参考和修改。