PHP+jquery +ajax实现无刷新分类参考

本文使用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) });

PHP

ajax.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;