PHP7 メッセージボード開発における Ajax ページング

php7 チュートリアル 掲示板開発における Ajax ページングを紹介するコラム

推奨(無料): php7 チュートリアル

基本ページのサポートにより、ページのユーザー エクスペリエンスを向上させたい場合は、非同期データの読み込みが現時点で最適なソリューションです。方法。 Ajax ページングは​​練習に最適な応用シナリオです. 使用するナレッジポイントは、前回の Friends - PHP7 掲示板開発 (Ajax 非同期投稿) のクラスである程度紹介されています. ここでは説明しません.前のセクションの内容をお読みください。

チュートリアルの内訳

• 1. 定義gotopage(){}Function

  JavaScript には、関数ベースのスコープがあります。現在のページはグローバルに利用可能であり、識別子は gotopage と定義されています。

• 2. Ajax 非同期操作

  前のレッスンの内容ですが、ここで最も重要なことは、非同期リクエストを行うときの GET メソッドに注意することです。 ajax.php 非同期リクエストサーバーで処理する必要がある論理ファイルであり、ユーザーのページめくりリクエストを受け取り、応答ページ数のデータを返すだけで済みます（もちろん他のコンテンツも含まれます） JSON などの形式についてはここでは説明しません)。

• 3. JS 印刷データinnerHTML

指定されたページ領域にページめくりデータを印刷します<ul id="list_box"><u></u></ul>、ここでのスタイル構造は ul タグ内のコンテンツを出力するため、JS セレクター document.getElementById("list_box") を使用して取得します。 ul タグのオブジェクト。その後、innerHTML 属性を使用してコンテンツを割り当て、必要な結果を実現します。 document.getElementById("list_box").innerHTML = 'サーバーから返されたデータ';

• 4. JS ループ for を使用して、すべてのページ番号を走査し、現在のページ番号

を特定します。

セレクターを使用してすべての Page オブジェクトを取得します var pageno = document.getElementsByClassName('pageno');
ページ番号の合計数を計算しますpageno.length
for一致するまでループします。現在のユーザーが要求した page ページ番号は、現在のページです。一致が成功すると、スタイルが現在のページ番号に追加されます (識別)現在のリクエストが成功したページ番号)。

このチュートリアルは、Friends の 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;
}

?>
nbsp;html>

    
        <meta>
        <title>异步翻页+列表带搜索功能_留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link>
        <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>
    
    
        <!-- 工作区，呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p>
            </p><p>
                </p><h3 id="留言板">留言板</h3>
                <h5 id="LIST">LIST</h5>
            
            <p>
                </p><p>
                </p>

                     关键词：" />                                  

                                 

                                         
• 姓名： 联系方式： 内容：
                                     

                

                    

                                                 
• , '');">
                                             

                                           

非同期ページング コードpage.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;])?addslashes(strip_tags($_GET[&#39;keyword&#39;])):&#39;&#39;;

$pagesize = 6;
// 开始分页查询，根据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 WHERE 1 LIMIT {$offset}, {$pagesize}";
}

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

$lists = array();
$list = &#39;&#39;;

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

echo $list;
exit;

概要

このセクションは初心者にとっては比較的難しいです。関連する知識ポイントは、これまでに学習した内容の要約です。始める前に、アイデアを明確にし、段階的に実装する必要があります。
アイデアは非常に重要であることを忘れないでください。単に学ぶだけでは十分ではありません。他の同様のニーズが発生したときに、それを習得できる必要があります。
いよいよ、コーディングを開始します。 ~

以上がPHP7 メッセージボード開発における Ajax ページングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。