Ajax实现无刷新分页效果

最新推荐文章于 2022-05-13 18:08:32 发布

qq_39706019

最新推荐文章于 2022-05-13 18:08:32 发布

阅读量1.5k

点赞数

分类专栏：博客文章标签：其他

本文链接：https://blog.csdn.net/qq_39706019/article/details/81661713

版权

本文介绍了使用Ajax实现无刷新分页的效果，以减少带宽、服务器资源和用户等待时间的损耗。详细讲解了如何通过调整数据库查询（如MySQL的limit关键字）和修改分页类来实现这一功能，并提供了主访问页面index.html的示例代码，将分页链接改为js函数调用，通过Ajax获取分页信息。

摘要由CSDN通过智能技术生成

本文参考自: 原文地址

一、无刷新分页技术的必要性

如果我们通过“传统方式”实现上图的商品分页效果，每次分页的时候就会使得头部、左侧、底部等已经显示的信息重新从服务器获得出来，这样对带宽、服务器资源、用户等待时间都有额外的损耗。如果使用ajax无刷新分页，每次就只从服务器获得”商品评论区域“信息即可，对各方面资源的使用就有相应节省，因此ajax无刷新分页效果有其存在的必要性。

二、具体实现

商品总记录条数、每页显示多少条

mysql 数据库关键字limit

limit 偏移量，长度

偏移量：（当前页码-1）*每页显示条数

limit 0,7

limit 7,7

limit 14,7

三、制作传统分页效果

http://网址/data.php?page=1 第一页

http://网址/data.php?page=2 第二页

http://网址/data.php?page=3 第三页

服务器端data.php:

<?php
header("content-type: text/html; charset=utf-8");
error_reporting(E_ALL ^ E_DEPRECATED);

//制作传统分页效果，连接数据库，获得数据、分页显示
$link = mysql_connect('localhost', 'root','');
mysql_select_db('taobao',$link);
mysql_query('set names utf8');

//实现数据分页
//第一步：引入分页类
include("./Pagination.php");

// //第二步：获得总记录条数
$sql = "select * from dg_taobao";
$qry = mysql_query($sql);
$total = mysql_num_rows($qry);
$per = 7;

//第三步：实例化分页类对象
$page_obj = new Pagination($total, $per);

//第四步：制作sql语句，获得每页信息
//$page_obj->limit：分页类会根据当前的页码把“limit偏移量长度”给制作好
$sql3 = "select * from dg_taobao ".$page_obj->limit;  //一定注意select * from dg_taobao后有一个空格，坑死我啦~~
$qry3 = mysql_query($sql3);

//第五步：获得页码列表
$page_list = $page_obj->fpage(array(3,4,5,6,7,8));

echo <<<eof
<style type="text/css">
	table{width:700px; margin:auto; border:1px solid black; border-collapse:collapse}
	td{border:1px solid black;}
</style>
	<table>
		<tr><td>序号</td><td>名称</td><td>数量</td><td>类别</td><td>重量</td></tr>
eof;
// $num = （当前页码-1）*每页条数;
$p = isset($_GET['page'])?$_GET['page']:1;
$num = ($p-1)*$per;
if($qry3){
	while ($rst3 = mysql_fetch_assoc($qry3)) {
	echo "<tr>";
	echo "<td>".++$num."</td>";
	echo "<td>".$rst3['name']."