php ajax请求怎样实现分页加载 - 问答

要在PHP中使用Ajax实现分页加载，可以按照以下步骤操作：

创建一个名为data.php的PHP文件，用于获取数据并进行分页处理。在这个文件中，你需要连接到数据库并查询所需的数据。为了简化示例，我们假设你使用的是MySQL数据库。

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取请求参数
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$limit = 10; // 每页显示的数据条数

// 计算查询的起始位置
$start = ($page - 1) * $limit;

// 查询数据
$sql = "SELECT id, name, age FROM myTable LIMIT $start, $limit";
$result = $conn->query($sql);

$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
} else {
    echo "0 结果";
}

// 返回JSON格式的数据
echo json_encode($data);

$conn->close();
?>

创建一个名为index.php的HTML文件，用于显示数据和分页按钮。在这个文件中，我们将使用Ajax从data.php获取数据，并在页面上显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页加载示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="data-container">
        <!-- 数据将在这里显示 -->
    </div>
    <div id="pagination">
        <!-- 分页按钮将在这里显示 -->
    </div>

    <script>
        let currentPage = 1;
        let totalPages = 0;

        // 获取数据并显示
        function loadData() {
            $.ajax({
                url: 'data.php',
                type: 'GET',
                dataType: 'json',
                data: { page: currentPage },
                success: function(response) {
                    if (response.length === 0) {
                        alert('没有更多数据了');
                        return;
                    }

                    displayData(response);
                    updatePagination(response.length, totalPages);
                },
                error: function() {
                    alert('获取数据失败');
                }
            });
        }

        // 显示数据
        function displayData(data) {
            let html = '';
            data.forEach(function(item) {
                html += '<div>' + item.id + ' - ' + item.name + ' - ' + item.age + '</div>';
            });
            $('#data-container').html(html);
        }

        // 更新分页按钮
        function updatePagination(totalItems, totalPages) {
            if (totalPages === 0) {
                totalPages = 1;
            }

            let html = '';
            for (let i = 1; i <= totalPages; i++) {
                html += '<button onclick="changePage(' + i + ')">' + i + '</button>';
            }
            $('#pagination').html(html);
        }

        // 改变当前页
        function changePage(page) {
            if (page > 0 && page <= totalPages) {
                currentPage = page;
                loadData();
            } else {
                alert('无效的页码');
            }
        }

        // 初始化
        $(document).ready(function() {
            loadData();
            totalPages = Math.ceil(100 / 10); // 假设总共有100条数据
        });
    </script>
</body>
</html>

现在，当你打开index.php并点击分页按钮时，页面将使用Ajax从data.php获取数据并显示。请注意，这个示例仅用于演示目的，实际应用中可能需要根据需求进行调整。

0 赞

0 踩