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 절을 사용하여 특정 결과 집합을 쿼리하고 이를 테이블에 씁니다. 🎜🎜마지막으로 사용 가능한 페이지에 대한 링크를 생성하고 사용자가 원하는 페이지 번호를 선택할 수 있도록 페이지 하단에 배치하는 루프를 만듭니다. 🎜🎜페이징 쿼리 구현🎜🎜🎜이제 우리 페이지에서는 모든 제품을 표시하고 간단한 페이징 기능을 지원할 수 있습니다. 그러나 대규모 프로젝트에서는 이와 관련하여 더 효율적이어야 할 수도 있습니다. 다음으로 jQuery 라이브러리를 사용하여 새로운 페이지 매김 기능을 구현하겠습니다. 🎜🎜이를 달성하려면 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)
