jQuery データベースはページング クエリ データベースを実装します
現代の Web アプリケーションでは、データベースは不可欠なコンポーネントです。大規模なプロジェクトでは、データの保存と管理に使用されるデータベースに数千のレコードが含まれることがよくあります。したがって、多くの場合、Web ページにすべてのデータ レコードを読み込むことは、Web ページの読み込みが非常に遅くなるため、良い選択肢ではありません。現時点では、jQuery データベースを使用してページング クエリ データベースを実装し、より良いパフォーマンスとユーザー エクスペリエンスを実現する方法を学ぶ必要があります。
この記事では、ほとんどの jQuery ベースの Web アプリケーションに適した、データベースのページング クエリを実装する方法を紹介します。次のトピックについて説明します:
1. アプリケーションで機能するようにデータベース情報と jQuery ライブラリをセットアップする方法。
2. データベースから必要なデータを取得するコードの記述方法。
3. jQuery を使用してページング機能を実装し、ページの応答速度とパフォーマンスを向上させる方法。
まず、データベース接続情報を含む PHP ファイルを作成する必要があります。ここでは、データベースに接続するためのデータベースのホスト名、ユーザー名、パスワード、データベース名を定義します。次のようになります:
<?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 "连接成功";
?>このファイルでは、変数 $servername、$username、$password、# を変更する必要があります。 ##$ dbname は、データベースのアクセス要件に一致します。
products という名前のテーブルを作成し、そこにページング クエリ用のレコードをいくつか追加する必要があります。このテーブルを作成するには、次の SQL コードを使用できます。
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 );
config.php という新しいファイルを作成します。次に、すべての製品のリストを表示できるホームページとなる index.php というページを作成します。
index.php の完全なコードです:
<?php
include 'config.php';
?>
<!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['page'])) {
$page = 1;
} else {
$page = $_GET['page'];
}
$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['id']; ?></td>
<td><?php echo $row['product_name']; ?></td>
<td><?php echo $row['product_description']; ?></td>
<td><?php echo $row['reg_date']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
for ($page=1;$page<=$number_of_pages;$page++) {
echo '<a href="index.php?page=' . $page . '">' . $page . '</a> ';
}
?>
</div>
</body>
</html> $results_per_page を定義します。 変数は、各ページに表示されるレコードの数を示します。次に、page ステートメントが $_GET 変数に存在するかどうかを確認し、存在しない場合は、それを 1 に設定します。次に、SELECT * FROM products を使用してすべての製品をクエリし、mysqli_num_rows() 関数を使用してレコード数をカウントします。これはページングの計算に使用されます。その後、利用可能なページの総数を表す $number_of_pages 変数を定義し、次のステップで特定のページ番号を使用して $this_page_first_result を計算します。次に、LIMIT 句を使用して特定の結果セットをクエリし、テーブルに書き込みます。
ajax.php という新しいファイルを作成する必要があります。これは、AJAX、PHP、jQuery ライブラリなどのテクノロジを使用することを意味します。 ajax.php のコードは次のとおりです:
<?php
include 'config.php';
if (isset($_GET['page'])) {
$page = $_GET['page'];
} 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 . ',' . $results_per_page;
$result = $conn->query($sql);
$data = [];
while($row = mysqli_fetch_array($result)) {
array_push($data, $row);
}
$conn->close();
echo json_encode($data);
?>$_GET 変数に存在するかどうかを確認します。 page ステートメントが存在する場合は、それを $page 変数に保存し、存在しない場合は 1 に設定します。次に、$results_per_page 変数と $this_page_first_result 変数を定義して、取得される結果のセットを制限します。最後に、SELECT * FROM products LIMIT を使用して特定の結果セットをクエリし、それを JSON 形式のデータ出力として保存します。
script.js という新しいファイルを作成します。以下は 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 += '<a href="#" data-page="' + i + '">' + 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();
});在上述代码中，我们首先定义 $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>
这些代码用于下载包括 jQuery 库在内的其他脚本文件。
结论
通过本文所介绍的技术，你可以使用 jQuery 数据库实现分页查询，而无需加载所有记录。这可以提高页面的加载速度和响应速度，从而提高用户体验和性能。虽然本文只是展示了一种简单的技术，但是随着你了解更多的方法和技术，可以制定更健壮的和专业的 web 应用程序。
以上がjQuery データベースを使用してページング クエリ データベースを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
