jQuery+Ajax+PHP无刷新分页

最新推荐文章于 2021-09-27 10:48:45 发布

lucky芬

最新推荐文章于 2021-09-27 10:48:45 发布

阅读量1k

点赞数

分类专栏： php 练手小案例

练手小案例同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

php

3 篇文章 0 订阅

订阅专栏

代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>jQuery+Ajax+PHP无刷新分页</title>
    <meta name="keywords" content="ajax分页,ajax无刷新分页" />
    <meta name="description" content="本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。" />
    <style type="text/css">
        *{margin:0;padding:0;}
        .container{width: 100%;}
        .title{text-align: center;margin-top: 40px;}
        .lists{width:600px; margin:0px auto; overflow: hidden;}
        #ul_lists{width: 100%;overflow: hidden;}
        #ul_lists li{
            float:left;width:31%;
            height:210px;margin:10px 1%;box-sizing:border-box;border:1px solid #ddd;
            padding:5px;overflow:hidden}
        #ul_lists li img{width:100%;height:130px;margin:0 0 6px;}
        #ul_lists li a{width:100%;height:100%;font-size: 12px;text-decoration: none;overflow: hidden;}
        .page{ margin:12px 0 20px;  text-align:center}
        .page span{margin:5px; font-size:14px}
    </style>
</head>
<body>
    <div class="container">
        <h2 class="title">jQuery+Ajax+PHP无刷新分页</h2>
        <div class="lists"><ul id="ul_lists" class="clearfix"></ul></div>
        <div class="page" id="page"></div>
    </div>
    <script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
    <script type="text/javascript">
        var page_cur = 1; //当前页
        var total_num, page_size, page_total_num;//总记录数,每页条数,总页数
        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格式");
                }
            });
        }

        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);
        }

        $(function() {
            getData(1);//默认第一页
            $("#page a").live('click', function() { //live 向未来的元素添加事件处理器,不可用bind
                var page = $(this).attr("data-page");//获取当前页
                getData(page)
            });
        });
    </script>
</body>
</html>

ajax.php

<?php
include_once('connect.php');

$page = intval($_GET['page']); //当前页
$total_num = mysql_num_rows(mysql_query("select id from food")); //总记录数
$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 food 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);
?>

connect.php

<?php
$host="localhost";
$db_user="root";//使用本地的数据库用户名
$db_pass="4QLpRyaYxKkrkMEP";//使用本地的数据库密码
$db_name="demo";
$timezone="Asia/Shanghai";
$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");

header("Content-Type: text/html; charset=utf-8");
date_default_timezone_set($timezone); //北京时间
?>

food.sql

-- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- 主机: localhost
-- 生成日期: 2012 年 11 月 05 日 20:50
-- 服务器版本: 5.1.63
-- PHP 版本: 5.2.17

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- 数据库: `lrfbeyond_demo`
--

-- --------------------------------------------------------

--
-- 表的结构 `food`
--
CREATE TABLE IF NOT EXISTS `food` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `pic` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=31 ;

--
-- 转存表中的数据 `food`
--

INSERT INTO `food` (`id`, `title`, `pic`) VALUES
(1, '新货 核桃 新疆大核桃 阿克苏薄皮核桃 仁很饱满【巴扎20度C】', 'http://img02.taobaocdn.com/bao/uploaded/i2/T1UQTWXjlhXXa0TSA._083409.jpg_b.jpg'),
(2, '100%正宗 新疆库尔勒香梨 95元/箱15斤毛重 江浙沪包邮 新鲜 水果', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1XLbSXkFfXXaWt5AT_011948.jpg_b.jpg'),
(3, '新疆特产特级大个开心果250克 自然开口颗粒饱满 满2斤包邮', 'http://img04.taobaocdn.com/bao/uploaded/i4/T1BvJPXX4yXXad.nIW_024727.jpg_b.jpg'),
(4, '店庆一袋包邮晋谷香新疆和田壶瓶枣一级玉枣红枣批发山西大枣500g', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1FUViXldEXXcf9moW_024549.jpg_b.jpg'),
(5, '新疆野生肉苁蓉 大芸250克 沙漠人参', 'http://img03.taobaocdn.com/bao/uploaded/i3/T15hYMXmtXXXcklKTb_123629.jpg_b.jpg'),
(6, '新疆特产 特级开口小银杏仁500g 杏核 野生饱满坚果干果 2斤包邮', 'http://img03.taobaocdn.com/bao/uploaded/i7/T1xoqfXaJsXXcUtHja_120240.jpg_b.jpg'),
(7, '美国大杏核 纸皮 香脆可口 粒粒饱满 休闲零食首选', 'http://img01.taobaocdn.com/bao/uploaded/i1/T17x_ZXjFlXXaau978_071645.jpg_b.jpg'),
(8, '湖南特产湘莲子\\12年寸三莲2件包邮\\农家自种纯天然\\特级白莲450g ', 'http://img01.taobaocdn.com/bao/uploaded/i1/T1.gT2XjFhXXcJGKE._111803.jpg_b.jpg'),
(9, '新疆风特产小吃特级果干冰梅冰凉梅子休闲食品孕妇零食满200包邮 ', 'http://img01.taobaocdn.com/bao/uploaded/i1/T1B0CzXllkXXa_ca7T_010708.jpg_b.jpg'),
(10, '湖南特产白鹤铁板鸡蛋煎饼早餐饼 500g称重 比Tipo面包干好吃N倍 ', 'http://img01.taobaocdn.com/bao/uploaded/i1/T12dzXXbVcXXbjanLb_095349.jpg_b.jpg'),
(11, '湖南常德特产 原价35现价32元两只免邮 散装泰味酱板鸭 刚出炉的 ', 'http://img02.taobaocdn.com/bao/uploaded/i2/T1k1OWXdhdXXcbY.cU_015918.jpg_b.jpg'),
(12, '湖南特产 盐津铺子 香酥牛肉味兰花豆 蚕豆500克 4斤包邮 ', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1RO91XkhaXXch7OE6_062222.jpg_b.jpg'),
(13, '椒丝牛肉（四川特产自贡麻辣兔头/兔腿；缠丝兔；冷吃兔冷吃牛肉) ', 'http://img02.taobaocdn.com/bao/uploaded/i2/T1..5GXoxxXXalsP.1_041722.jpg_b.jpg'),
(14, '四川私房菜，特产小吃。味味妈妈秘制香辣牛蹄筋，透亮Q滑 ', 'http://img01.taobaocdn.com/bao/uploaded/i1/T1tx5EXlRnXXXlgy.6_062259.jpg_b.jpg'),
(15, '沈师傅鸡蛋干100g营养美味 四川特产 沈师傅鸡蛋干100克 ', 'http://img04.taobaocdn.com/bao/uploaded/i4/T1KX6tXnJsXXcQC8k._112940.jpg_b.jpg'),
(16, '川香居 糖醋排骨 掌柜推荐 四川特产小吃零食 120g 满50包邮 ', 'http://img04.taobaocdn.com/bao/uploaded/i4/T16hPbXgJlXXbAIj.__080146.jpg_b.jpg'),
(17, '黄金香原味迷你猪肉脯56g 厦门特产 蜜汁猪肉干 中华老字号 零食 ', 'http://img04.taobaocdn.com/bao/uploaded/i4/T1N19zXnxWXXXHy7g9_104229.jpg_b.jpg'),
(18, '淘金币 秒杀福建特产卤味风味小吃鸡爪洪濑红毛凤爪零食小吃团购 ', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1yKYTXdtoXXaCzp3._111208.jpg_b.jpg'),
(19, '厦门特产 香贡贡糖果牛味肉丁 XO牛味肉粒4份包邮 舌尖上的中国 ', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1cx23XetaXXauXCg8_071539.jpg_b.jpg'),
(20, '买就送茶叶品尝包 八克装 福建1725安溪铁观音清香型 乌龙茶 特级', 'http://img01.taobaocdn.com/bao/uploaded/i1/T1__L0XndiXXaeglI._113301.jpg_b.jpg'),
(21, '包邮 云南特产鲜花饼 玫瑰花饼 现烤 礼盒 500克10个装 花味源 ', 'http://img01.taobaocdn.com/bao/uploaded/i1/T1a3TDXdprXXbz9bZ._111445.jpg_b.jpg'),
(22, '云南特产 滇味堂白酥皮云腿月饼50克 火腿月饼 ', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1.5rBXmpdXXaO_HYc_125908.jpg_b.jpg'),
(23, '【良品铺子】牛肝菌烧烤味即食 云南特产野生食用菌 休闲干货零食 ', 'http://img04.taobaocdn.com/bao/uploaded/i4/T1Qn12Xa0qXXXMZ1I._112111.jpg_b.jpg'),
(24, '正宗 一手店 熟食 猪蹄 猪手 猪爪 猪脚 东北特产黑龙江美食小吃 ', 'http://img04.taobaocdn.com/bao/uploaded/i4/T1Gm14XblaXXbp4MTX_115322.jpg_b.jpg'),
(25, '哈尔滨红肠正宗秋林里道斯红肠500克真空包装东北特产小吃不限重 ', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1ZTVvXjddXXcunnU7_065822.jpg_b.jpg'),
(26, '琦丽山珍 干果新货 奶油味夏威夷果 澳洲坚果 零食特产 特价促销 ', 'http://img02.taobaocdn.com/bao/uploaded/i2/T1kdzpXolvXXbjUT7U_015907.jpg_b.jpg'),
(27, '【山尖百合】贵州传统小吃波波糖 原生态养颜食材 无蔗糖添加剂', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1Bz1cXdldXXbtTV.2_043100.jpg_b.jpg'),
(28, '特价抢购中【飘零大叔】杂志推荐-蜜汁猪肉脯- 靖江特产 零食 250', 'http://img01.taobaocdn.com/bao/uploaded/i1/T1v4urXfJvXXaGmNcU_015023.jpg_b.jpg'),
(29, '杭梦 特价坚果新疆巴旦木 纸皮巴旦木龙果 薄壳大杏仁 4件包邮', 'http://img03.taobaocdn.com/bao/uploaded/i3/T1.gm3XcXkXXbzFJAU_014249.jpg_b.jpg'),
(30, '包邮1000克(500克*2袋) 新疆天生无壳 生南瓜子仁', 'http://img03.taobaocdn.com/bao/uploaded/i3/T19iYSXa0gXXbATxfa_121311.jpg_b.jpg');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

lucky芬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery+Ajax+PHP无刷新分页

代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql)index.html jQuery+Ajax+PHP无刷新分页 *{margin:0;padding:0;} .container{width: 100%;} .title
复制链接

扫一扫