PHP7留言板开发之 Ajax分页的实现方法

发布时间:2020-12-18 13:41:03 作者:小新
来源:亿速云 阅读:144

这篇文章给大家分享的是有关PHP7留言板开发之 Ajax分页的实现方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

有了基础页面的支撑,想要提高页面的用户体验,那么异步的数据加载目前来说是最好的处理方式了。Ajax分页是练手的最好应用场景,运用到的知识点,在上节课老友记之PHP7留言板开发(Ajax异步提交)已经有了一定的介绍,这里就不再敖述,如有明白请看上节内容。

教程分解

在指定的页面区域打印翻页数据<ul id="list_box"><u/>,这里的样式结构是要在ul标签内输出内容,所以用JS选择器document.getElementById("list_box"),获取ul标签的对象,然后运用其中的innerHTML属性赋值内容,完成我们想要的结果document.getElementById("list_box").innerHTML = '服务器返回的数据';

用选择器获取所有的页面对象var pageno = document.getElementsByClassName('pageno');
计算总页码数量pageno.length
for循环遍历直到匹配到当前用户请求的page页码数即当前页,匹配成功就给当前页数添加样式(标识当前请求成功的页数)。

本教程基于老友记之PHP7留言板开发(分页)内容上改动。

HTML代码list.php
<?php
include 'config.php';

$page = !empty($_GET['page'])?intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?strip_tags($_GET['keyword']):'';
$pagesize = 6;

// 统计总记录数,便于计算出总页数
if(!empty($keyword)){
    $sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%'";
}else{
    $sql = "SELECT * FROM feedback";
}
$result = mysqli_query($mysqli, $sql);
$total = mysqli_affected_rows($mysqli);
$total_page = ceil($total/$pagesize); // 进一法取整获取总页数

// 开始分页查询,根据page计算偏移量
$offset = ($page - 1) * $pagesize;

if(!empty($keyword)){
    $sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%' LIMIT {$offset}, {$pagesize}";
}else{
    $sql = "SELECT * FROM feedback LIMIT {$offset}, {$pagesize}";
}
$result = mysqli_query($mysqli, $sql);

$lists = array();
while($rows = mysqli_fetch_array($result)){
    $lists[] = $rows;
}

?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>异步翻页+列表带搜索功能_留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link rel="stylesheet" href="feedback.css">
        <script>
            function gotopage(page, keyword){
                if(page<0){
                    page = 1;
                }
                // 创建 XMLHttpRequest 对象
                var ajax, url;
                if(window.XMLHttpRequest){
                    ajax = new XMLHttpRequest();
                }else{
                    // 兼容Internet Explorer(IE5 和 IE6)使用 ActiveX 对象
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                url = 'page.php?page=' + page + '&keyword=' + keyword;
                ajax.open('GET', url, true);
                ajax.send();
                ajax.onreadystatechange = function(){
                    // 获取服务器响应状态码
                    if(ajax.readyState == 4 && ajax.status==200){
                        // 获取服务器返回的响应返回的数据
                        var retdata = ajax.responseText;
                        // 如果返回的时候不为空的时候,就输出
                        
                        if(retdata){
                            // 这里是将异步请求的数据 在指定区域(list_box)展示给用户看
                            document.getElementById("list_box").innerHTML = retdata;

                            // 最后将页面中的定位当前分页数,告诉用户当前在哪个分页
                            // 这里相对逻辑会复杂点,慢慢领会
                            // 第一步获取所有分页数的集合
                            var pageno = document.getElementsByClassName('pageno');
                            // 这里用到for循环遍历 从多个分页的集合获取当前用户点击的那个分页链接并添加样式active
                            for(var i=0; i<pageno.length; i++){
                                pageno[i].className = 'pageno';
                                // parseInt(i)+1意思是当前分页,
                                if(parseInt(i)+1 == page){
                                    pageno[i].className = 'pageno active';
                                }
                            }
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <!-- 工作区,呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p class="container_box">
            <p class="up">
                <h4 class="title">留言板</h4>
                <h6 class="subtitle">LIST</h6>
            </p>
            <p class="down list">
                <p class="search">
                <form action="list.php">    
                关键词:<input type='text' name="keyword" value="<?php echo $keyword?>" />
                <input type="submit" value="去搜索">
                </form>
                </p>
                <ul id="list_box">
                    <?php
                    foreach($lists as $item){
                    ?>
                    <li>姓名:<?php echo $item['name']?> 联系方式:<?php echo $item['contact']?> 内容:<?php echo $item['content']?></li>
                    <?php
                    }
                    ?>
                </ul>
                <p class="pages">
                    <ul>
                        <?php
                        for($p = 1; $p<=$total_page; $p++){
                        ?>
                        <li class="pageno"><a href="javascript:gotopage(<?php echo $p?>, '<?php echo $keyword?>');"><?php echo $p?></a></li>
                        <?php
                        }
                        ?>
                    </ul>
                </p>
            </p>
        </p>
    </body>
</html
异步分页代码page.php
<?php
include 'config.php';

$page = !empty($_GET['page'])? intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?addslashes(strip_tags($_GET['keyword'])):'';

$pagesize = 6;
// 开始分页查询,根据page计算偏移量
$offset = ($page - 1) * $pagesize;

if(!empty($keyword)){
    $sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%' LIMIT {$offset}, {$pagesize}";
}else{
    $sql = "SELECT * FROM feedback WHERE 1 LIMIT {$offset}, {$pagesize}";
}

$result = mysqli_query($mysqli, $sql);

$lists = array();
$list = '';

while($rows = mysqli_fetch_array($result)){
    $list .= "<li>姓名:". $rows['name']." 联系方式:". $rows['contact']." 内容:".$rows['content']."</li>";
}

echo $list;
exit;

感谢各位的阅读!关于PHP7留言板开发之 Ajax分页的实现方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. Yii 框架之采用自带的jquery库实现ajax分页
  2. 详解Spring框架之基于Restful风格实现的SpringMVC

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

php ajax p7

上一篇:go语言主要有什么用

下一篇:Python全栈介绍MySQL数据库的示例

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》