PHP7留言板开发之 Ajax分页-9543建站博客

广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

PHP7留言板开发之 Ajax分页

php7教程栏目介绍留言板开发中的Ajax分页

推荐（免费）：php7教程

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

教程分解1、定义gotopage(){}函数JavaScript具有基于函数的作用域，只要定义了，当前页面的是全局可用的，标识就是gotopage。2、Ajax异步操作上节课的内容，这里最要是异步请求的时候注意是GET方式，ajax.php是异步请求服务端需要处理的逻辑文件，接收用户翻页请求，返回响应页数的数据即可（当然其他格式的内容就行，比如JSON，这里就不讲解）。3、JS打印数据innerHTML

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

4、JS循环for的运用，遍历所有页码并标识当前页码

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

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

HTML代码list.php

<?phpinclude '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">                <h3 class="title">留言板</h3>                <h5 class="subtitle">LIST</h5>            </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

<?phpinclude '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分页的详细内容，更多请关注9543建站博客其它相关文章！