Ajax+php+jquery无刷新分页处理

最新推荐文章于 2022-03-28 22:39:07 发布

LPLIFE

最新推荐文章于 2022-03-28 22:39:07 发布

阅读量885

点赞数

分类专栏： jQuery php 阿贾克斯

本文链接：https://blog.csdn.net/LPLIFE/article/details/80472391

版权

php 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

jQuery

9 篇文章 0 订阅

订阅专栏

阿贾克斯

3 篇文章 0 订阅

订阅专栏

日常酱油.....

如下动图:

主要解决的问题如下:

 
 1.使用PDO连接数据库 

 
 2.PDO::query 执行SQL语句,返回PDOStatement对象,可以理解为结果集 

 
 3.PDOStatement::fetchColumn 从结果集中的下一行返回单独的一列  

 
 4.ceil() : 函数向上舍入为最接近的整数,如: 

 
 ceil(0.60); //1 

 
 ceil(0.40);//1 

 
 ceil(5);//5 

 
 ceil(5.1);//6 

 
 ceil(-5.1);//-1 

 
 ceil(-5.9);//-5 

 
 5. 关键点:如何得到指定范围内的数据,使用: SELECT * FROM news LIMIT start, size 

 
 start :表示截取数据的开始位置(下标从0开始) 

 
 size:表示截取的长度 

 
 如: 

 
 6. PHP关联数组 

 
 关联数组是使用分配给数组的指定的键的数组 

 
 创建关联数组的方法: 

 
  $age = array("peter"=>"35","Ben"=>"37","Joe"=>"43"); 

 
 或者 

 
 $age["Peter"]="35"; 

 
 $age["Ben"]="37"; 

 
 $age["Joe"]="43"; 

 
 取出值:$age["Peter"] // 35 

 
 遍历方法:可以使用foreach 

 
 foreach($age as $x=>$x_value){ 

 
 echo "key=" . $x .", Value=" . $x_value; 

 
 echo "<br>"; 

}

 
 7. HTML data-*属性 

 
 data-* 属性用于存储私有页面后应用的自定义数据 

 
 data-* 属性可以在所有的HTML元素中嵌入数据 

 
 自定义的数据可以让页面拥有更好的交互体验(不需要使用ajax或去服务端查询数据) 

 
 data-* 属性由以下两部分组成: 

 
 1.属性名不要包含大写字母,在data-后必须至少有一个字符 

 
 2.该属性可以是任何字符串 

 
 注意:自定义属性前缀"data-"会被客户端忽略 

 
 8. JSON.parse(): 可以把JSON 字符串转换为JSON对象 

 
 9. 分页总体设计思路 

 
 后端:获取当前页页数,从数据库中取出该范围内得数据,并返回 

 
 前端: 

 
 1.默认显示数据 

 
 2.获取后端返回得数据,并展示 

 
 3.分页链接的生成(关键点:最大分页数,获取当前页数,为分页连接绑定点击事件) 

10.

 
 PDOStatement::fetchAll 返回一个包含结果集中所有行的数组 

 
 PDO::TETCH_ASSOC 返回一个索引为结果集列名的数组  

 
 json_encode 对变量进行JSON编码,该函数如果执行成功返回jason数据 

  代码: 
 
 

  index.html 
 
 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>

    <body>
        <div class="box">
            <div class="title">
                PHP + Ajax + jQuery 无刷新分页
            </div>
            <!--页面内容-->
            <div class="list">
                <ul class="content"></ul>
            </div>
            <!--分页链接-->
            <div class="pagelist">
            </div>
        </div>
        <script>
            $(function() {
                var page = 1;
                var n = 0;
                var max = 1;
                getData();
                /*获取指定页的数据*/
                function getData() {
                    $.ajax({
                        type: "GET",
                        url: "ajax.php",
                        data: {
                            "page": page
                        },
                        dateType: "json",
                        success: function(json) {
                            json = JSON.parse(json);
                            n = json.total;
                            max = json.max;
                            content(json.list);
                        },
                        complete: function() {
                            pageList();
                        },
                        error: function() {
                            alert("请求错误");
                        }
                    });
                }

                /*生成分页连接*/
                function pageList() {
                    page = Math.min(page, max);
                    page = Math.max(page, 1);
                    var html = "<div><span>共" + n + "条,第" + page + "/" + max + "页</span>";
                    html += '<a href="#" data-page="1">首页</a>';
                    html += (page > 1) ? '<a href="#" data-page="' + (page - 1) + '">上一页</a>' : '<a href="#" data-page="1">上一页</a>';
                    html += (page < max) ? '<a href="#" data-page="' + (page + 1) + '">下一页</a>' : '<a href="#" data-page="' + max + '">下一页</a>';
                    html += '<a href="#" data-page="' + max + '">尾页</a></div>';
                    var $html = $(html);
                    //为链接添加单击事件
                    $html.find("a").click(function() {
                        page = $(this).attr("data-page");
                        getData();
                    });
                    $(".pagelist").html($html);

                }
                /*生成内容*/
                function content(list) {
                    var str = " ";
                    for(var i in list) {
                        str += '<li><img src="' + list[i]['pic'] + '"/><p><a href="#">' + list[i]['title'] + '</a></p></li>'
                    }
                    $(".content").html(str);
                }
            })
        </script>
    </body>

</html>

ajax.php

$start = ($page-1) * $size;
$sql = "SELECT * FROM `books` limit $start,$size";
$data = $conn->query($sql)->fetchAll(PDO::FETCH_ASSOC);
$result = array(
    'total' => $n,
    'max' => $max,
    'list' => array()
);
foreach($data as $v){
	$result['list'][] = array(
	 'id' => $v["id"],
	 'title' => $v["title"],
	 'pic' => $v["pic"]
	);
}
echo json_encode($result); 
?>

简单样式

index.css

body {
    margin: 0;
    background: whitesmoke;
    color: #555;
}

div.box {
    color: firebrick;
    width: 900px;
    position: relative;
    margin: 0 auto;
}

div.title {
    text-align: center;
}

ul.content {
    list-style: none;
}

li {
    width: 250px;
    height: 210px;
    float: left;
    border: 1px solid gainsboro;
    font-size: 12px;
    text-decoration: none;
}

div.pagelist {
    position: absolute;
    top: 500px;
    left: 200px;
}

img {
    width: 250px;
    height: 155px;
    margin: 0px;
}

.content a,
.pagelist a {
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    font-family: "微软雅黑";
}

.content a:hover,
.pagelist a:hover {
    color: firebrick;
}

完整代码连接: 代码下载