jQuery 데이터베이스는 페이징 쿼리 데이터베이스를 구현합니다.
현대 웹 애플리케이션에서 데이터베이스는 필수 구성 요소입니다. 대규모 프로젝트에서는 데이터를 저장하고 관리하는 데 사용되는 데이터베이스에 수천 개의 레코드가 포함되는 경우가 많습니다. 따라서 많은 경우 모든 데이터 레코드를 웹 페이지에 로드하는 것은 웹 페이지 로드 속도가 매우 느려지므로 좋은 옵션이 아닙니다. 이번에는 더 나은 성능과 사용자 경험을 달성하기 위해 jQuery 데이터베이스를 사용하여 페이징 쿼리 데이터베이스를 구현하는 방법을 배워야 합니다.
이 기사에서는 대부분의 jQuery 기반 웹 애플리케이션에 적합한 데이터베이스의 페이징 쿼리 구현 방법을 소개합니다. 우리는 다음 주제를 다룰 것입니다:
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 은 데이터베이스의 액세스 요구 사항과 일치합니다. $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 变量表示每页要展示的记录数。然后，我们检查 $_GET 变量中是否存在 page 语句，如果不存在，则将其设置为 1。然后，我们使用 SELECT * FROM products 查询所有产品，然后使用 mysqli_num_rows() 函数计算记录数量，用于计算分页。之后，我们定义了 $number_of_pages 变量表示可用的页面总数，并在下一步计算具有特定页面编号的 $this_page_first_result。而后，我们使用 LIMIT 子句查询特定的结果集并写入表格中。
最后，我们创建一个循环，生成可用页面的链接并放在页面底部，使得用户可以从其中选择期望的页码。
现在，我们的页面可以显示所有产品，并支持简单的分页功能。但是，在项目更大时，我们可能需要更高效的这方面。下面，我们将使用 jQuery 库实现新的分页功能。
为了实现此目的，我们需要创建一个新的名为 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 格式的数据输出。
为了在前端页面中使用 AJAX 请求获取数据，我们将创建一个新的名为 script.js 的文件，用于处理这些请求。以下是 script.js
products라는 테이블을 생성하고 페이징 쿼리를 위해 여기에 몇 가지 레코드를 추가해야 합니다. 다음 SQL 코드를 사용하여 이 테이블을 생성할 수 있습니다. 🎜$(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();
});config.php라는 새 파일을 만듭니다. 그런 다음 모든 제품 목록을 볼 수 있는 홈 페이지가 될 index.php라는 페이지를 작성합니다. 🎜🎜다음은 index.php의 전체 코드입니다. 🎜<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/script.js"></script>
$results_per_page 변수를 정의합니다. 각 페이지에 표시될 기록의 수입니다. 그런 다음 $_GET 변수에 page 문이 있는지 확인하고, 없으면 1로 설정합니다. 그런 다음 SELECT * FROM products를 사용하여 모든 제품을 쿼리한 다음 mysqli_num_rows() 함수를 사용하여 페이지 매김을 계산하는 데 사용되는 레코드 수를 계산합니다. 그런 다음 사용 가능한 총 페이지 수를 나타내기 위해 $number_of_pages 변수를 정의하고 다음 단계에서는 특정 페이지 번호를 사용하여 $this_page_first_result를 계산합니다. 그런 다음 LIMIT 절을 사용하여 특정 결과 집합을 쿼리하고 이를 테이블에 씁니다. 🎜🎜마지막으로 사용 가능한 페이지에 대한 링크를 생성하고 사용자가 원하는 페이지 번호를 선택할 수 있도록 페이지 하단에 배치하는 루프를 만듭니다. 🎜ajax.php라는 새 파일을 만들어야 합니다. 즉, AJAX, PHP 및 jQuery 라이브러리와 같은 기술을 사용하게 됩니다. ajax.php에 대한 코드는 다음과 같습니다. 🎜rrreee🎜위 코드에서는 먼저 데이터베이스 연결 정보를 포함하고 $_GET 변수에 page 문이 있으면 $page 변수에 저장하고, 그렇지 않으면 1로 설정합니다. 그런 다음 $results_per_page 변수와 $this_page_first_result 변수를 정의하여 검색된 결과 집합을 제한합니다. 마지막으로 SELECT * FROM products LIMIT를 사용하여 특정 결과 집합을 쿼리하고 이를 JSON 형식의 데이터 출력으로 저장합니다. 🎜🎜AJAX 요청을 사용하여 프런트엔드 페이지에서 데이터를 가져오기 위해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
