下载演示地点：http://www.erdangjiade.com/js…
本文运用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; 


  [1]: http://www.erdangjiade.com/js/2.html
  [2]: /img/bVKyOj

下载演示地点：http://www.erdangjiade.com/js…