Ajax-Paging in der PHP7-Messageboard-Entwicklung-PHP7-php.cn

php7-TutorialDie Kolumne stellt Ajax-Paging in der Message-Board-Entwicklung vor

Ajax-Paging in der PHP7-Messageboard-Entwicklung

Empfohlen (kostenlos): php7-Tutorial

Mit der Unterstützung der Basisseite möchte ich den Benutzer verbessern Wenn Sie Erfahrung mit der Seite haben, ist das asynchrone Laden von Daten derzeit die beste Möglichkeit, damit umzugehen. Ajax-Paging ist das beste Anwendungsszenario zum Üben. Die verwendeten Wissenspunkte wurden in gewissem Umfang in der vorherigen Klasse von Friends – PHP7 Message Board Development (Ajax Asynchronous Submission) eingeführt. Bitte lesen Sie den Inhalt des vorherigen Abschnitts.

Aufschlüsselung des Tutorials

1. Definieren Sie gotopage(){}Funktion
. Solange es definiert ist, ist die aktuelle Seite global verfügbar. und der Bezeichner ist gotopage.

gotopage(){}

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

Nach dem Login kopieren

异步分页代码`page.php`

2. Ajax-Asynchronbetrieb Aus dem Inhalt der vorherigen Lektion geht hervor, dass das Wichtigste hier ist, bei asynchronen Anforderungen auf die Methode GET zu achten, ajax.php Es handelt sich um eine logische Datei, die vom asynchronen Anforderungsserver verarbeitet werden muss. Sie muss lediglich die Umblätteranforderung des Benutzers empfangen und die Daten der Anzahl der Antwortseiten (natürlich den Inhalt in) zurückgeben andere Formate wie JSON werden hier nicht erläutert.

3. JS-Druckdaten innerHTML

Umblätterdaten im angegebenen Seitenbereich drucken

, die Stilstruktur hier besteht darin, den Inhalt innerhalb des ul-Tags auszugeben, also verwenden Sie den JS-Selektor document.getElementById("list_box"), um Rufen Sie das ul-Tag-Objekt ab und verwenden Sie dann das Attribut innerHTML, um Inhalte zuzuweisen und die gewünschten Ergebnisse zu erzielen. document.getElementById("list_box").innerHTML = 'Vom Server zurückgegebene Daten'; code>

🎜4. Verwendung der JS-Schleife for, um alle Seitenzahlen zu durchlaufen und die aktuelle Seitenzahl zu identifizieren🎜Verwenden Sie einen Selektor um alle Seitenobjekte zu erhaltenvar pageno = document.getElementsByClassName('pageno');🎜Berechnen Sie die Gesamtzahl der Seitenzahlenpageno.length🎜fürSchleife, bis die aktuelle Benutzeranfrage übereinstimmt. Die Seitennummer page ist die aktuelle Seite. Wenn die Übereinstimmung erfolgreich ist, wird ein Stil zur aktuellen Seitennummer hinzugefügt (der die Seitennummer identifiziert, für die die aktuelle Seite gilt). Anfrage ist erfolgreich). 🎜🎜Dieses Tutorial basiert auf dem Inhalt der PHP7-Messageboard-Entwicklung (Paginierung) von Friends. 🎜
🎜HTML-Code list.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;
Nach dem Login kopieren
🎜Asynchroner Paging-Code page.php🎜rrreee🎜Zusammenfassung🎜🎜Dieser Abschnitt ist für Anfänger relativ schwierig und erfordert The Gelernte Wissenspunkte sind eine Zusammenfassung dessen, was zuvor gelernt wurde. Bevor es losgeht, müssen Sie Ihre Vorstellungen klären und diese Schritt für Schritt umsetzen. 🎜Denken Sie daran, dass Denken allein nicht ausreicht. Sie müssen es beherrschen, wenn Sie andere ähnliche Bedürfnisse haben. 🎜Endlich ist es Zeit, mit dem Codieren zu beginnen! ~🎜Das obige ist der detaillierte Inhalt vonAjax-Paging in der PHP7-Messageboard-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!