溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

PHP7留言板開發(fā)之 Ajax分頁(yè)的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-12-18 13:41:03 來源：億速云 閱讀：147 作者：小新 欄目：編程語(yǔ)言

這篇文章給大家分享的是有關(guān)PHP7留言板開發(fā)之 Ajax分頁(yè)的實(shí)現(xiàn)方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

有了基礎(chǔ)頁(yè)面的支撐，想要提高頁(yè)面的用戶體驗(yàn)，那么異步的數(shù)據(jù)加載目前來說是最好的處理方式了。Ajax分頁(yè)是練手的最好應(yīng)用場(chǎng)景，運(yùn)用到的知識(shí)點(diǎn)，在上節(jié)課老友記之PHP7留言板開發(fā)（Ajax異步提交）已經(jīng)有了一定的介紹，這里就不再敖述，如有明白請(qǐng)看上節(jié)內(nèi)容。

教程分解
  • 1、定義gotopage(){}函數(shù)

    JavaScript具有基于函數(shù)的作用域，只要定義了，當(dāng)前頁(yè)面的是全局可用的，標(biāo)識(shí)就是gotopage。

  • 2、Ajax異步操作

    上節(jié)課的內(nèi)容，這里最要是異步請(qǐng)求的時(shí)候注意是GET方式，ajax.php是異步請(qǐng)求服務(wù)端需要處理的邏輯文件，接收用戶翻頁(yè)請(qǐng)求，返回響應(yīng)頁(yè)數(shù)的數(shù)據(jù)即可（當(dāng)然其他格式的內(nèi)容就行，比如JSON，這里就不講解）。

  • 3、JS打印數(shù)據(jù)innerHTML

在指定的頁(yè)面區(qū)域打印翻頁(yè)數(shù)據(jù)<ul id="list_box"><u/>，這里的樣式結(jié)構(gòu)是要在ul標(biāo)簽內(nèi)輸出內(nèi)容，所以用JS選擇器document.getElementById("list_box")，獲取ul標(biāo)簽的對(duì)象，然后運(yùn)用其中的innerHTML屬性賦值內(nèi)容，完成我們想要的結(jié)果document.getElementById("list_box").innerHTML = '服務(wù)器返回的數(shù)據(jù)';

  • 4、JS循環(huán)for的運(yùn)用，遍歷所有頁(yè)碼并標(biāo)識(shí)當(dāng)前頁(yè)碼

用選擇器獲取所有的頁(yè)面對(duì)象var pageno = document.getElementsByClassName('pageno');
計(jì)算總頁(yè)碼數(shù)量pageno.length
for循環(huán)遍歷直到匹配到當(dāng)前用戶請(qǐng)求的page頁(yè)碼數(shù)即當(dāng)前頁(yè)，匹配成功就給當(dāng)前頁(yè)數(shù)添加樣式（標(biāo)識(shí)當(dāng)前請(qǐng)求成功的頁(yè)數(shù)）。

本教程基于老友記之PHP7留言板開發(fā)（分頁(yè)）內(nèi)容上改動(dòng)。

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;

// 統(tǒng)計(jì)總記錄數(shù)，便于計(jì)算出總頁(yè)數(shù)
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); // 進(jìn)一法取整獲取總頁(yè)數(shù)

// 開始分頁(yè)查詢，根據(jù)page計(jì)算偏移量
$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>異步翻頁(yè)+列表帶搜索功能_留言板_科科分享</title>
        <!-- 2.新建css樣式文件并根據(jù)效果圖編寫css代碼 -->
        <link rel="stylesheet" href="feedback.css">
        <script>
            function gotopage(page, keyword){
                if(page<0){
                    page = 1;
                }
                // 創(chuàng)建 XMLHttpRequest 對(duì)象
                var ajax, url;
                if(window.XMLHttpRequest){
                    ajax = new XMLHttpRequest();
                }else{
                    // 兼容Internet Explorer（IE5 和 IE6）使用 ActiveX 對(duì)象
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                url = 'page.php?page=' + page + '&keyword=' + keyword;
                ajax.open('GET', url, true);
                ajax.send();
                ajax.onreadystatechange = function(){
                    // 獲取服務(wù)器響應(yīng)狀態(tài)碼
                    if(ajax.readyState == 4 && ajax.status==200){
                        // 獲取服務(wù)器返回的響應(yīng)返回的數(shù)據(jù)
                        var retdata = ajax.responseText;
                        // 如果返回的時(shí)候不為空的時(shí)候，就輸出
                        
                        if(retdata){
                            // 這里是將異步請(qǐng)求的數(shù)據(jù) 在指定區(qū)域（list_box）展示給用戶看
                            document.getElementById("list_box").innerHTML = retdata;

                            // 最后將頁(yè)面中的定位當(dāng)前分頁(yè)數(shù)，告訴用戶當(dāng)前在哪個(gè)分頁(yè)
                            // 這里相對(duì)邏輯會(huì)復(fù)雜點(diǎn)，慢慢領(lǐng)會(huì)
                            // 第一步獲取所有分頁(yè)數(shù)的集合
                            var pageno = document.getElementsByClassName('pageno');
                            // 這里用到for循環(huán)遍歷 從多個(gè)分頁(yè)的集合獲取當(dāng)前用戶點(diǎn)擊的那個(gè)分頁(yè)鏈接并添加樣式active
                            for(var i=0; i<pageno.length; i++){
                                pageno[i].className = 'pageno';
                                // parseInt(i)+1意思是當(dāng)前分頁(yè),
                                if(parseInt(i)+1 == page){
                                    pageno[i].className = 'pageno active';
                                }
                            }
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <!-- 工作區(qū)，呈現(xiàn)給用戶看的 -->
        <!-- 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">    
                關(guān)鍵詞：<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']?> 聯(lián)系方式：<?php echo $item['contact']?> 內(nèi)容：<?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
異步分頁(yè)代碼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;
// 開始分頁(yè)查詢，根據(jù)page計(jì)算偏移量
$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']." 聯(lián)系方式：". $rows['contact']." 內(nèi)容：".$rows['content']."</li>";
}

echo $list;
exit;

感謝各位的閱讀！關(guān)于PHP7留言板開發(fā)之 Ajax分頁(yè)的實(shí)現(xiàn)方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手