Cara menggunakan pangkalan data jQuery untuk melaksanakan pangkalan data pertanyaan paging-Soal Jawab bahagian hadapan-php.cn

Pangkalan data jQuery melaksanakan pangkalan data pertanyaan paging

Dalam aplikasi web moden, pangkalan data merupakan komponen yang sangat diperlukan. Dalam projek besar, pangkalan data yang digunakan untuk menyimpan dan mengurus data selalunya mengandungi beribu-ribu rekod. Oleh itu, dalam banyak kes, memuatkan semua rekod data ke dalam halaman web bukanlah pilihan yang baik kerana ia akan menyebabkan halaman web dimuatkan dengan sangat perlahan. Pada masa ini, kita perlu belajar cara menggunakan pangkalan data jQuery untuk melaksanakan pangkalan data pertanyaan paging untuk mencapai prestasi dan pengalaman pengguna yang lebih baik.

Dalam artikel ini, kami akan memperkenalkan kaedah yang sesuai untuk kebanyakan aplikasi web berasaskan jQuery untuk melaksanakan pertanyaan paging pangkalan data. Kami akan membincangkan topik berikut:

1 Bagaimana untuk menyediakan maklumat pangkalan data dan perpustakaan jQuery supaya ia berfungsi untuk aplikasi anda.
2. Cara menulis kod untuk mendapatkan semula data yang diperlukan daripada pangkalan data.
3. Cara melaksanakan fungsi paging dengan menggunakan jQuery untuk meningkatkan kelajuan dan prestasi tindak balas halaman.

Sediakan persekitaran

Mula-mula, anda perlu mencipta fail PHP yang mengandungi maklumat sambungan pangkalan data. Di sini, kami akan menentukan nama hos, nama pengguna, kata laluan dan nama pangkalan data pangkalan data untuk disambungkan ke pangkalan data. Nampaknya seperti ini:

<?php

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

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

Salin selepas log masuk

Dalam fail ini, pembolehubah $servername, $username, $password dan $dbname perlu ditukar agar sepadan dengan keperluan akses pangkalan data anda.

Untuk melaksanakan fungsi paging, anda perlu mencipta jadual bernama products dalam pangkalan data dan menambah beberapa rekod padanya untuk pertanyaan paging. Anda boleh menggunakan kod SQL berikut untuk mencipta jadual ini:

CREATE TABLE products (
  id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  product_name VARCHAR(30) NOT NULL,
  product_description VARCHAR(50),
  reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

Salin selepas log masuk

Menulis Kod

Dalam bahagian ini, kami akan menulis kod kami untuk mendapatkan semula data daripada pangkalan data , dan membahagikan data kepada berbilang halaman untuk melaksanakan fungsi halaman.

Pertama, kami akan mencipta fail baharu bernama config.php untuk mengandungi maklumat sambungan pangkalan data kami. Kami kemudian akan menulis halaman yang dipanggil index.php yang akan menjadi halaman utama kami di mana kami boleh melihat senarai semua produk kami.

Berikut ialah kod lengkap untuk index.php:

<?php
include &#39;config.php&#39;;
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的产品目录</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<div id="container">
    <h1>我的产品目录</h1>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>产品描述</th>
                <th>注册日期</th>
            </tr>
        </thead>
        <tbody>
        <?php
            // 将结果分页
            $results_per_page = 5;

            if (!isset($_GET[&#39;page&#39;])) {
                $page = 1;
            } else {
                $page = $_GET[&#39;page&#39;];
            }

            $sql = "SELECT * FROM products";
            $result = $conn->query($sql);
            $number_of_results = mysqli_num_rows($result);

            $number_of_pages = ceil($number_of_results/$results_per_page);

            $this_page_first_result = ($page-1)*$results_per_page;

            $sql = "SELECT * FROM products LIMIT " . $this_page_first_result . ',' .  $results_per_page;
            $result = $conn->query($sql);

            while($row = mysqli_fetch_array($result)) {
        ?>
            <tr>
                <td><?php echo $row[&#39;id&#39;]; ?></td>
                <td><?php echo $row[&#39;product_name&#39;]; ?></td>
                <td><?php echo $row[&#39;product_description&#39;]; ?></td>
                <td><?php echo $row[&#39;reg_date&#39;]; ?></td>
            </tr>
        <?php
            }
        ?>
        </tbody>
    </table>

    <?php
        for ($page=1;$page<=$number_of_pages;$page++) {
            echo &#39;<a href="index.php?page=&#39; . $page . &#39;">' . $page . '</a> ';
        }
    ?>

</div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula memasukkan maklumat sambungan pangkalan data kami dan mentakrifkan $results_per_page pembolehubah untuk mewakili setiap halaman Nombor daripada rekod untuk dipaparkan. Kami kemudian menyemak sama ada pernyataan $_GET wujud dalam pembolehubah page dan jika tidak, tetapkan kepada 1. Kami kemudian menggunakan SELECT * FROM products untuk menanyakan semua produk dan kemudian menggunakan fungsi mysqli_num_rows() untuk mengira bilangan rekod, yang digunakan untuk mengira penomboran. Selepas itu, kami menentukan pembolehubah $number_of_pages untuk mewakili jumlah bilangan halaman yang tersedia dan dalam langkah seterusnya mengira $this_page_first_result dengan nombor halaman tertentu. Kemudian, kami menggunakan klausa LIMIT untuk menanyakan set hasil tertentu dan menulisnya pada jadual.

Akhir sekali, kami membuat gelung yang menjana pautan ke halaman yang tersedia dan meletakkannya di bahagian bawah halaman supaya pengguna boleh memilih nombor halaman yang dikehendaki.

Laksanakan pertanyaan paging

Kini, halaman kami boleh memaparkan semua produk dan menyokong fungsi paging yang mudah. Walau bagaimanapun, pada projek yang lebih besar, kita mungkin perlu lebih cekap dalam hal ini. Seterusnya, kami akan melaksanakan fungsi penomboran baharu menggunakan perpustakaan jQuery.

Untuk mencapainya, kami perlu mencipta fail baharu yang dipanggil ajax.php bermakna kami akan menggunakan teknologi seperti AJAX, PHP dan perpustakaan jQuery. Berikut ialah kod untuk ajax.php:

<?php
include &#39;config.php&#39;;

if (isset($_GET[&#39;page&#39;])) {
    $page = $_GET[&#39;page&#39;];
} else {
    $page = 1;
}

$results_per_page = 5;

$this_page_first_result = ($page-1)*$results_per_page;

$sql = "SELECT * FROM products LIMIT " . $this_page_first_result . &#39;,&#39; .  $results_per_page;

$result = $conn->query($sql);

$data = [];

while($row = mysqli_fetch_array($result)) {
    array_push($data, $row);
}

$conn->close();

echo json_encode($data);
?>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula memasukkan maklumat sambungan pangkalan data kami dan semak sama ada pernyataan $_GET wujud dalam pembolehubah page dan jika ya, maka Simpannya dalam pembolehubah $page, jika tidak tetapkan kepada 1. Kemudian, kami mentakrifkan $results_per_page pembolehubah dan $this_page_first_result pembolehubah yang mengehadkan set hasil yang diambil. Akhir sekali, kami menggunakan SELECT * FROM products LIMIT untuk menanyakan set hasil tertentu dan menyimpannya sebagai output data berformat JSON.

Untuk menggunakan permintaan AJAX untuk mendapatkan data di halaman hujung hadapan, kami akan mencipta fail baharu bernama script.js yang akan mengendalikan permintaan ini. Berikut ialah kod untuk script.js:

$(document).ready(function() {
    var resultsPerPage = 5;
    var currentPage = 1;

    function getProducts() {
        $.ajax({
            url: 'ajax.php',
            type: 'GET',
            data: {page: currentPage},
            dataType: 'json',
            success: function(data) {
                displayProducts(data);
                displayPagination();
            }
        });
    }

    function displayProducts(products) {
        var html = '';

        $.each(products, function(index, product) {
            html += '<tr>';
            html += '<td>' + product.id + '</td>';
            html += '<td>' + product.product_name + '</td>';
            html += '<td>' + product.product_description + '</td>';
            html += '<td>' + product.reg_date + '</td>';
            html += '</tr>';
        });

        $('table tbody').html(html);
    }

    function displayPagination() {
        var html = '';

        for (var i = 1; i <= totalPages(); i++) {
            html += &#39;<a href="#" data-page="&#39; + i + &#39;">' + i + '</a> ';
        }

        $('.pagination').html(html);

        $('.pagination a').click(function(event) {
            event.preventDefault();
            currentPage = $(this).data('page');
            getProducts();
        });
    }

    function totalPages() {
        return Math.ceil(totalProducts() / resultsPerPage);
    }

    function totalProducts() {
        return $('.total-products').data('total');
    }

    getProducts();
});

Salin selepas log masuk

在上述代码中，我们首先定义 $resultsPerPage 和 $currentPage 变量，用于存储每页显示的记录数和当前显示的页码。然后，我们定义一个名为 getProducts() 的函数，用于从 ajax.php 中请求数据，并在成功时将回调处理另外两个函数，即 displayProducts() 和 displayPagination()。在 displayProducts() 函数中，我们使用 jQuery 逐个迭代数据中的每个产品，为其创建一个 HTML 表格行。在 displayPagination() 函数中，我们使用一个简单的循环来创建页面链接，并将其添加进 .pagination 位于页面底部的导航原素中。紧接着，我们使用 .pagination a 绑定一个单击事件，当点击链接时将更新 $currentPage 变量，并再次调用 getProducts() 函数。

最后，为了在我们的 HTML 页面中使用 script.js 文件，我们需要在 HTML 底部的 </body> 标记前添加以下代码：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>

Salin selepas log masuk

这些代码用于下载包括 jQuery 库在内的其他脚本文件。

结论

通过本文所介绍的技术，你可以使用 jQuery 数据库实现分页查询，而无需加载所有记录。这可以提高页面的加载速度和响应速度，从而提高用户体验和性能。虽然本文只是展示了一种简单的技术，但是随着你了解更多的方法和技术，可以制定更健壮的和专业的 web 应用程序。

Atas ialah kandungan terperinci Cara menggunakan pangkalan data jQuery untuk melaksanakan pangkalan data pertanyaan paging. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!