PHP7留言板開發之 Ajax分頁-PHP7-PHP中文網

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.length
#for循環遍歷直到匹配到目前使用者請求的page頁碼數即當前頁，匹配成功就為目前頁數添加樣式（標識目前請求成功的頁數）。

本教學基於老友記之PHP7留言板開發（分頁）內容上改變。

HTML程式碼`list.php`

<?php
include &#39;config.php&#39;;

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

// 统计总记录数，便于计算出总页数
if(!empty($keyword)){
    $sql = "SELECT * FROM feedback WHERE name LIKE &#39;%{$keyword}%&#39;";
}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 &#39;%{$keyword}%&#39; 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 = &#39;page.php?page=&#39; + page + &#39;&keyword=&#39; + keyword;
                ajax.open(&#39;GET&#39;, 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(&#39;pageno&#39;);
                            // 这里用到for循环遍历 从多个分页的集合获取当前用户点击的那个分页链接并添加样式active
                            for(var i=0; i<pageno.length; i++){
                                pageno[i].className = &#39;pageno&#39;;
                                // parseInt(i)+1意思是当前分页,
                                if(parseInt(i)+1 == page){
                                    pageno[i].className = &#39;pageno active&#39;;
                                }
                            }
                        }
                    }
                }
            }
        </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=&#39;text&#39; 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[&#39;name&#39;]?> 联系方式：<?php echo $item[&#39;contact&#39;]?> 内容：<?php echo $item[&#39;content&#39;]?></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;

登入後複製