jQuery+Ajax+PHP无刷新分页

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 下载演示地址:http://www.erdangjiade.com/js/2.html效果图:本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。
下载演示地址:http://www.erdangjiade.com/js/2.html
效果图:



本文使用jQuery+Ajax+PHP+Mysql,通过实例讲解如何实现Ajax无刷新分页效果。
<div class="lists">
    <ul id="ul_lists" class="clearfix">
    </ul>
</div>#ul_lists以列表的形式展现数据,信息包括商品图片和标题
CSS.lists{width:740px;  margin:30px auto 0; position:relative}
#ul_lists li{float:left;width:220px;height:240px;margin:0 6px 6px;border:1px solid #ddd;padding:5px;overflow:hidden}
#ul_lists li img{width:220px; height:220px;margin:0 0 6px}
.page{ margin:12px 0 20px;  text-align:center}
.page span{margin:5px; font-size:14px}jQuery首先声明全局变量,后面分页用到。
var page_cur = 1; //当前页
var total_num, page_size, page_total_num;//总记录数,每页条数,总页数接着通过函数getData() 获取当前页数据。我们利用$.ajax GET方式把参数page以json格式传到ajax.php。
function getData(page) { //获取当前页数据
    $.ajax({
        type: 'GET',
        url: 'ajax.php',
        data: {
            'page': page - 1
        },
        dataType: 'json',
        success: function(json) {
            $("#ul_lists").empty();
            total_num = json.total_num; //总记录数
            page_size = json.page_size; //每页数量
            page_cur = page; //当前页
            page_total_num = json.page_total_num; //总页数
            var li = "";
            var list = json.list;
            $.each(list,
            function(index, array) { //遍历返回json
                li += "<li><a href='#'><img src='" + array['pic'] + "'>" + array['title'] + "</a></li>";
            });
            $("#ul_lists").append(li);
        },
        complete: function() {
            getPageBar(); //js生成分页,可用程序代替
        },
        error: function() {
            alert("数据异常,请检查是否json格式");
        }
    });
}每次请求返回的商品放置在#ul_lists中。当数据完全加载完毕后,调用函数getPageBar()生成分页,也可用程序来实现分页。
function getPageBar() { //js生成分页
    if (page_cur > page_total_num) page_cur = page_total_num; //当前页大于最大页数
    if (page_cur < 1) page_cur = 1; //当前页小于1
    page_str = "<span>共" + total_num + "条</span><span>" + page_cur + "/" + page_total_num + "</span>";
    if (page_cur == 1) { //若是第一页
        page_str += "<span>首页</span><span>上一页</span>";
    } else {
        page_str += "<span><a href='javascript:void(0)' data-page='1'>首页</a></span><span><a href='javascript:void(0)' data-page='" + (page_cur - 1) + "'>上一页</a></span>";
    }
    if (page_cur >= page_total_num) { //若是最后页
        page_str += "<span>下一页</span><span>尾页</span>";
    } else {
        page_str += "<span><a href='javascript:void(0)' data-page='" + (parseInt(page_cur) + 1) + "'>下一页</a></span><span><a href='javascript:void(0)' data-page='" + page_total_num + "'>尾页</a></span>";
    }
    $("#page").html(page_str);
}最后,当页面第一次加载时,我们加载第一页数据即getData(1),当点击分页条中的分页链接时,通过getData(page)加载对应页码的数据。页面page可在分页的属性data-page中获取。
$("#page a").live('click',function() { //live 向未来的元素添加事件处理器,不可用bind
    var page = $(this).attr("data-page"); //获取当前页
    getData(page)
});PHPajax.php接收每次前端页面的ajax请求,根据提交的页码page,计算总记录数和总页数,读取对应页码下的数据列表,并将结果以JSON格式返回给前端页面。
include_once('connect.php');

$page = intval($_GET['page']); //当前页
$total_num = mysql_num_rows(mysql_query("select id from goods")); //总记录数

$page_size = 6; //每页数量
$page_total = ceil($total_num / $page_size); //总页数
$page_start = $page * $page_size;

$arr = array("total_num" = >$total_num, "page_size" = >$page_size, "page_total_num" = >$page_total, );
$query = mysql_query("SELECT id,title,pic FROM goods ORDER BY ID ASC LIMIT $page_start,$page_size");
while ($row = mysql_fetch_array($query)) {
    $arr['list'][] = array('id' = >$row['id'], 'title' = >$row['title'], 'pic' = >$row['pic'], );
}

echo json_encode($arr);最后附上goods表结构,下载压缩包里也有哦~。
CREATE TABLE IF NOT EXISTS `goods` (  
  `id` int(8) NOT NULL AUTO_INCREMENT,  
  `title` varchar(80) NOT NULL,  
  `pic` varchar(255) NOT NULL,  
  PRIMARY KEY (`id`)  
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;
相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
12天前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
25 0
N..
|
12天前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
26 1
原生php实现列表接口+分页接口+排序接口组合使用+包括测试数据(不加任何封装)
原生php实现列表接口+分页接口+排序接口组合使用+包括测试数据(不加任何封装)
原生php实现列表接口+分页接口+排序接口组合使用+包括测试数据(不加任何封装)
|
11天前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
12天前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
|
12天前
|
XML 前端开发 JavaScript
【PHP 开发专栏】PHP 与 Ajax 交互开发
【4月更文挑战第30天】本文探讨了PHP与Ajax交互在Web开发中的应用。Ajax负责客户端的异步请求,PHP处理服务器端业务逻辑。两者结合实现高效、流畅的用户体验。文中阐述了Ajax的工作原理,PHP的角色,数据传输格式选择,并提供了发送Ajax请求、PHP处理请求的示例代码。实际应用包括实时数据更新、表单验证和动态内容加载。开发中需注意跨域、数据安全和性能优化。PHP与Ajax的结合将继续在Web开发中发挥重要作用。
|
12天前
|
SQL 前端开发 PHP
【PHP开发专栏】PHP分页功能的设计与实现
【4月更文挑战第29天】本文介绍了PHP实现分页功能,包括设计逻辑(用户界面和后端处理)、SQL查询优化和前端展示。后端通过计算页码和偏移量进行数据查询,前端展示分页信息并处理用户交互。优化点有使用索引、LIMIT语句和避免子查询。此外,还提到了无限滚动、AJAX分页和分页大小选择等高级功能,以提升用户体验。
|
12天前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
12天前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
19 0
|
12天前
|
前端开发 JavaScript 关系型数据库
PHP代码合集21个邮箱2个问答23个ajax特效
PHP代码合集21个邮箱2个问答23个ajax特效
20 0