使用ajax实现数据库分页查询 (怎么用ajax实现分页查询数据库)
使用Ajax实现数据库分页查询
随着网络技术的不断发展，各种网站的需求也变得越来越复杂，如何提高网站的响应速度和用户体验度就成为了一个非常重要的课题。在Web开发中，数据库分页显示是一种常见的需求，通过Ajax实现数据库分页查询不仅可以有效提高网站的响应速度，而且会使查询结果更加灵活，方便用户查看。
本篇文章将详细介绍如何使用Ajax实现数据库分页查询，主要包括以下几个步骤：
一、数据库设计和表结构
为了方便演示，我们假设需要对一个用户表进行分页显示。首先需要设计数据库，编写SQL语句创建用户表：
CREATE TABLE `user_info` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`gender` varchar(10) NOT NULL,
`birthday` datetime NOT NULL,
`eml` varchar(50) NOT NULL,
`phone` varchar(20) NOT NULL,
`address` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
上述SQL语句创建了一个名为user_info的用户表，并定义了七个字段，分别存储用户的姓名、性别、生日、电子邮件、和地址等信息。其中id字段是主键，自增长。
二、设置页面布局
接下来需要设置HTML页面布局。在这里我们将使用Bootstrap进行页面布局，但也可以使用其他前端框架或原生HTML/CSS布局。
Ajax实现数据库分页查询
全部
男
女
| 编号 | 姓名 | 性别 | 生日 | 电子邮件 | 地址 |
|---|
上面的HTML代码包括一个表单和一个数据表，其中表单用于用户输入查询条件。当用户提交表单时，会通过Ajax向服务器发送请求，并将查询结果显示在数据表中。数据表下面还有一个分页组件，可以用于浏览查询结果的不同页码。
三、编写Ajax请求代码
接下来我们需要编写实现数据库分页查询的Ajax请求代码。首先需要在服务器端编写查询代码，这里我们使用PHP编写：
// 连接数据库
$con = mysqli_connect(‘localhost’, ‘root’, ‘123456’, ‘test’);
if (!$con) {
die(‘Could not connect: ‘ . mysqli_error($con));
}
// 查询条件
$name = $_GET[‘name’];
$gender = $_GET[‘gender’];
// 从请求参数中解析要查询的页码和每页显示的记录数
$page = $_GET[‘page’];
$pageSize = $_GET[‘pageSize’];
if (!$page) {
$page = 1;
}
if (!$pageSize) {
$pageSize = 10;
}
// 构造查询条件
$where = ”;
if ($name) {
$where .= ” AND name like ‘%$name%'”;
}
if ($gender) {
$where .= ” AND gender=’$gender'”;
}
// 查询记录总数
$sql = “SELECT count(*) as total FROM user_info WHERE 1=1 $where”;
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);
$total = $row[‘total’];
// 计算分页数
$pageCount = ceil($total / $pageSize);
// 构造查询语句
$startIndex = ($page – 1) * $pageSize;
$sql = “SELECT * FROM user_info WHERE 1=1 $where ORDER BY id DESC LIMIT $startIndex, $pageSize”;
// 查询数据集
$result = mysqli_query($con, $sql);
$rows = array();
while ($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
}
// 返回结果集
echo json_encode(array(
‘rows’ => $rows,
‘page’ => $page,
‘total’ => $total,
‘pageCount’ => $pageCount
));
// 关闭数据库连接
mysqli_close($con);
?>
上面的代码包括了数据库连接、查询语句构造、数据集查询、分页计算和结果集返回等功能。该代码会从$_GET请求参数中获取查询条件和分页参数，并返回查询结果。
接下来需要在前端页面中编写发送Ajax请求的代码：
$(function() {
var pageSize = 10; // 每页显示的记录数
var currentPage = 1; // 当前页码
// 点击查询按钮时触发
$(‘form’).submit(function() {
currentPage = 1; // 重新开始查询，当前页码置为1
loadData(); // 加载数据
return false;
});
// 加载数据
function loadData() {
var name = $(‘#inputName’).val();
var gender = $(‘#inputGender’).val();
$.ajax({
url: ‘ajax.php’,
type: ‘get’,
dataType: ‘json’,
data: {
name: name,
gender: gender,
page: currentPage,
pageSize: pageSize
},
success: function(data) {
// 显示数据
showData(data.rows);
// 显示分页
showPaging(data.page, data.pageCount);
},
error: function(xhr, status, error) {
alert(‘加载数据失败：’ + error);
}
});
}
// 显示数据
function showData(rows) {
var html = ”;
$.each(rows, function(index, row) {
html += ‘
‘
‘ +
‘
‘ +
‘
‘ +
‘
‘ +
‘
‘ +
‘
‘ +
‘
‘ +
‘
‘;
});
$(‘#userTable’).html(html);
}
// 显示分页
function showPaging(page, pageCount) {
var html = ”;
if (page > 1) {
html += ‘
‘;
}
for (var i = 1; i
if (i == page) {
html += ‘
‘;
} else {
html += ‘
‘;
}
}
if (page
html += ‘
‘;
}
$(‘.pagination’).html(html);
// 绑定分页按钮事件处理函数
$(‘.pagination a’).click(function() {
currentPage = $(this).data(‘page’);
loadData();
return false;
});
}
// 初始化界面
loadData();
});
上述代码包括了发送Ajax请求、显示数据和分页的处理逻辑。在显示数据时，会根据查询结果动态生成HTML代码并插入到页面中，这里使用了jQuery的$.each函数遍历结果集，并将每条记录显示为一个表格行。在显示分页时，会根据页码数动态生成分页HTML代码，并将结果插入到分页组件中。点击分页按钮时会触发分页处理函数，重新发送查询请求并更新界面。
四、测试效果
完成上述步骤后，我们就可以测试函数效果了。在服务器端，需要将PHP文件放置在Web服务器中，这里我们放到Apache的htdocs目录下。在客户端，打开浏览器，输入http://localhost/ajax.html地址，即可访问我们编写的HTML页面。
在输入查询条件并点击查询按钮后，页面会通过Ajax发送查询请求，并将返回结果动态显示在数据表中。如果查询结果包含多页数据，就可以使用分页按钮进行翻页，每页的记录数可以通过修改pageSize变量设置。可以看到，使用Ajax实现数据库分页查询可以大大提高系统的响应速度和用户体验度，是一种非常实用的技巧。
