PHP+jQuery实现滚屏无刷新动态加载数据功能详解

这里是“PHP+jQuery实现滚屏无刷新动态加载数据功能”的完整攻略。

概述

在现代web应用程序中，基于Ajax的无刷新数据加载已成为一种非常流行的设计模式。当我们需要展示大量数据时，分页不可避免，但这样会对用户体验造成较差的影响，如果我们采用无限滚动（infinite scroll）方式加载数据可以有效提高用户满意度。

在本攻略中，我们将使用PHP和jQuery来实现无限滚动加载数据的功能，这种方法非常灵活，适用于各种类型的Web应用程序，例如博客、新闻、社交媒体和电子商务网站等。

步骤

1. 前期准备

在开始之前，你需要学习一些基础知识，例如：

PHP基础知识
jQuery库的基础知识
Ajax技术的基础知识
瀑布流(infinite scroll)的设计模式

2. 数据准备

在本例中，我们将通过PHP脚本从数据库中获取数据，并将数据以JSON格式返回给浏览器。我们定义一个PHP文件load-more.php，用来获取分页数据：

// 加载数据库配置文件
require_once 'db-config.php';

// 获取当前页码和每页显示的记录数
$current_page = $_GET['page'];
$per_page_records = $_GET['perpage'];

// 计算查询的起始记录偏移量
$start = ($current_page - 1) * $per_page_records;

// 查询数据库
$query = "SELECT * FROM `news` LIMIT $start, $per_page_records";
$result = mysqli_query($conn, $query);

// 定义数据存储数组
$data_array = array();

// 遍历数据库查询结果
while ($row = mysqli_fetch_assoc($result)) {
    $data_array[] = $row;
}

// 将查询结果转换为JSON格式并输出到浏览器
echo json_encode($data_array);

3. HTML结构

HTML结构很简单，一个包含数据的容器。这个容器将动态加载数据：

<div id="load-data-container"></div>

4. jQuery代码

在这个例子中，我们将使用jQuery发起一个Ajax请求并处理服务器返回的JSON数据。jQuery的$.getJSON()方法将从PHP脚本接收JSON数据。我们还将使用jQuery的append()方法将数据追加到#load-data-container中。

$(document).ready(function () {
    // 定义一些初始值
    var page = 1; // 当前页码
    var perpage = 10; // 每页显示的记录数
    var isLoading = false; // 当前是否正在加载数据

    // 定义一个用来加载数据的函数
    function loadData() {
        if (isLoading) return; // 如果当前正在加载数据，则不执行任何操作

        isLoading = true; // 将状态设置为正在加载中

        // 发起一个get类型的AJAX请求
        $.getJSON('load-more.php', {page: page, perpage: perpage}, function (data) {
            if (data.length > 0) { // 如果查询到了数据
                // 遍历数据项并将它们添加到页面中
                $.each(data, function (i, item) {
                    var $tr = $('<div id="' + item.id + '">' + item.title + '</div>');
                    $('#load-data-container').append($tr);
                });

                page++; // 增加页码
                isLoading = false; // 将状态设置为“未加载数据”
            }
        });
    }

    // 只要滚动条距离底部小于200像素就读取更多数据
    $(window).scroll(function () {
        if (($(window).scrollTop() + $(window).height() > $(document).height() - 200)) {
            loadData();
        }
    });

    // 初始化数据
    loadData();
});

这段代码定义了一个loadData()函数，用于向服务器请求获取数据，并将数据加载到HTML容器中。我们为该函数定义一个特殊的状态标志isLoading，以确保我们不会重复加载数据。我们还通过使用jQuery选择器将数据加载到#load-data-container容器中，同时还使用了滚动事件将其触发。最后，我们用全局的document.ready()方法来启动该应用程序。

5. 示例说明

例1：获取电影列表

假设我们需要在网站上展示电影列表，数据存储在MYSQL数据库中。首先，我们需要将数据存储在数据库表中。在这个例子中，我们创建一个名为movies的表，其中包含以下数据字段：

ID：电影唯一编号。
title：电影标题。
description：电影简介。
poster：电影海报图片的url地址。
release_date：上映日期。

接下来，我们需要创建一个PHP文件load-more.php，用来获取分页数据：

require_once 'db-config.php';

$current_page = $_GET['page'];
$per_page_records = $_GET['perpage'];

$start = ($current_page - 1) * $per_page_records;

$query = "SELECT * FROM `movies` LIMIT $start, $per_page_records";
$result = mysqli_query($conn, $query);

$data_array = array();

while ($row = mysqli_fetch_assoc($result)) {
    $data_array[] = $row;
}

echo json_encode($data_array);

最后，在HTML页面中，我们需要添加一个容器来存储数据：

<div id="load-data-container"></div>

最后，我们需要在js代码块中使用$.getJSON()方法获取数据并将其放入容器中。

$(document).ready(function () {
    var page = 1;
    var perpage = 10;
    var isLoading = false;

    function loadData() {
        if (isLoading) return;

        isLoading = true;

        $.getJSON('load-more.php', {page: page, perpage: perpage}, function (data) {
            if (data.length > 0) {
                $.each(data, function (i, item) {
                    var $movie = $('<div class="movie-item" id="' + item.id + '">' +
                        '<img src="' + item.poster + '"/>' +
                        '<h3>' + item.title + '</h3>' +
                        '<p>' + item.release_date + '</p>' +
                        '<p>' + item.description + '</p>' +
                        '</div>');
                    $('#load-data-container').append($movie);
                });

                page++;
                isLoading = false;
            }
        });
    }

    $(window).scroll(function () {
        if (($(window).scrollTop() + $(window).height() > $(document).height() - 200)) {
            loadData();
        }
    });

    loadData();
});

例2：获取新闻列表

假设我们需要在网站上展示新闻列表，数据存储在MYSQL数据库中。首先，我们需要将数据存储在数据库表中。在这个例子中，我们创建一个名为news的表，其中包含以下数据字段：

ID：文章唯一编号。
title：文章标题。
content：文章内容。
created_time：文章发布日期。