目次
チュートリアルの内訳
1. 定義gotopage(){}Function
2. Ajax 非同期操作
4. JS ループ for を使用して、すべてのページ番号を走査し、現在のページ番号
概要
ホームページ バックエンド開発 PHP7 PHP7 メッセージボード開発における Ajax ページング

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

Dec 17, 2020 am 10:07 AM
php7

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/>、ここでのスタイル構造は 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;
}

?>
<!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;
ログイン後にコピー
概要

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

php7.0にmongo拡張機能をインストールする方法 php7.0にmongo拡張機能をインストールする方法 Nov 21, 2022 am 10:25 AM

php7.0 に mongo 拡張機能をインストールする方法: 1. mongodb ユーザー グループとユーザーを作成します; 2. mongodb ソース コード パッケージをダウンロードし、ソース コード パッケージを "/usr/local/src/" ディレクトリに配置します; 3. 「src/」ディレクトリに入ります; 4. ソースコードパッケージを解凍します; 5. mongodb ファイルディレクトリを作成します; 6. ファイルを「mongodb/」ディレクトリにコピーします; 7. mongodb 設定ファイルを作成して設定を変更します。

php7がTCPポートが機能していないことを検出した場合の問題を解決する方法 php7がTCPポートが機能していないことを検出した場合の問題を解決する方法 Mar 22, 2023 am 09:30 AM

php5 では、fsockopen() 関数を使用して TCP ポートを検出できます。この機能を使用して、ネットワーク接続を開き、ネットワーク通信を実行できます。ただし、php7 では、fsockopen() 関数でポートを開けない、サーバーに接続できないなどの問題が発生する可能性があります。この問題を解決するには、socket_create() 関数とsocket_connect() 関数を使用して TCP ポートを検出します。

php7.0 にプラグインがインストールされているのに、まだインストールされていないと表示される場合はどうすればよいですか? php7.0 にプラグインがインストールされているのに、まだインストールされていないと表示される場合はどうすればよいですか? Apr 02, 2024 pm 07:39 PM

PHP 7.0 でインストールされているプラ​​グインが表示されない問題を解決するには: プラグインの設定を確認し、プラグインを有効にします。 PHP を再起動して、構成の変更を適用します。プラグイン ファイルの権限をチェックして、それらが正しいことを確認します。不足している依存関係をインストールして、プラグインが適切に機能することを確認します。他のすべての手順が失敗した場合は、PHP を再構築します。他に考えられる原因としては、プラグインのバージョンに互換性がない、間違ったバージョンをロードしている、PHP 構成の問題などが挙げられます。

PHP サーバー環境 FAQ ガイド: 一般的な問題を迅速に解決する PHP サーバー環境 FAQ ガイド: 一般的な問題を迅速に解決する Apr 09, 2024 pm 01:33 PM

PHP サーバー環境の一般的な解決策には、正しい PHP バージョンがインストールされていること、および関連ファイルがモジュール ディレクトリにコピーされていることを確認することが含まれます。 SELinux を一時的または永続的に無効にします。 PHP.ini をチェックして構成し、必要な拡張機能が追加され、正しく設定されていることを確認します。 PHP-FPM サービスを開始または再起動します。 DNS 設定に解決の問題がないか確認してください。

php7.0のインストールとデプロイ方法 php7.0のインストールとデプロイ方法 Nov 30, 2022 am 09:56 AM

php7.0 をインストールおよび展開する方法: 1. PHP 公式 Web サイトにアクセスして、ローカル システムに対応するインストール バージョンをダウンロードします; 2. ダウンロードした zip ファイルを指定したディレクトリに解凍します; 3. コマンド ライン ウィンドウを開いて、次のリンクに移動します。 「E:\php7」ディレクトリ 「php -v」コマンドを実行するだけです。

システムの再起動後にUnixSocketの権限を自動的に設定する方法は? システムの再起動後にUnixSocketの権限を自動的に設定する方法は? Mar 31, 2025 pm 11:54 PM

システムが再起動した後、UnixSocketの権限を自動的に設定する方法。システムが再起動するたびに、UnixSocketの許可を変更するために次のコマンドを実行する必要があります:sudo ...

Docker環境にPECLを使用して拡張機能をインストールするときにエラーが発生するのはなぜですか?それを解決する方法は? Docker環境にPECLを使用して拡張機能をインストールするときにエラーが発生するのはなぜですか?それを解決する方法は? Apr 01, 2025 pm 03:06 PM

エラーの原因とソリューションPECLを使用してDocker環境に拡張機能をインストールする場合、Docker環境を使用するときに、いくつかの頭痛に遭遇します...

php8 と php7 ではどちらが優れていますか? php8 と php7 ではどちらが優れていますか? Nov 16, 2023 pm 03:09 PM

PHP7 と比較すると、PHP8 にはパフォーマンス、新機能と構文の改善、型システム、エラー処理と拡張機能の点でいくつかの利点と改善点があります。ただし、どのバージョンを使用するかは、特定のニーズとプロジェクトの状況によって異なります。詳細な紹介: 1. パフォーマンスの向上、PHP8 はコードの実行速度を向上できるジャストインタイム (JIT) コンパイラーを導入します; 2. 新機能と構文の改善、PHP8 は名前付きパラメーターとオプションのパラメーターの宣言をサポートします。関数の作成 呼び出しがより柔軟になり、匿名クラス、プロパティの型宣言などが導入されています。

See all articles