検索
ホームページバックエンド開発PHPチュートリアルPHP+Ajaxを利用した非リフレッシュページング機能の実装方法

この記事では、主に PHP+Ajax で実装されたリフレッシュフリーのページング機能を紹介し、具体的な例に基づいてデータベースを読み取ってページングで表示するための PHP+Ajax の関連実装テクニックを pdo 操作クラスを通じて分析します。デモのソース コードを読者が参照できるようにダウンロードして参照できます

詳細は次のとおりです:

注: この記事で使用されているクラス ライブラリの一部は、前の記事でソース コードを見つけることができます。記事の長さを短くするため、記事内にリンクを記載させていただきます。

この記事では、リフレッシュフリー ページングの Ajax 実装、実装原理、コード表示、およびコード ダウンロードについて説明します。

ここでいくつかの知識を説明する必要があります:

1. ページを更新せずに Ajax を使用する利点: 優れた顧客エクスペリエンスを提供し、データベースからデータを取得して Ajax を通じてバックグラウンドで表示し、表示される空白の状態を排除します。ページがロードされるのを待っている間;

2. つまり、Ajax の非更新ページは動的ページ (.php) 上で実行されるのでしょうか?それとも静的ページ (.html/.htm/.shtml) ですか?答えは次のとおりです: 静的ページ;

3. 実装原理: 動的ページから返されるデータは、フロントエンド JS スクリプト プログラムと Ajax の組み合わせを通じて取得および表示されます。

それでは、以下のコードを説明していきます。

静的ページで実行するので、まず静的HTMLページを作成します。index.htmlのコードリストは以下の通りです。

index.html


<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script> <!-- 载入 Ajax 类库 -->
<title>Ajax 实现无刷新页面</title>
<style type="text/css">
 body {
  font-size:12px;
 }
</style>
</head>
<body>
 <p id="fpage">数据加载中...</p>
</body>
</html>


この静的ページには、Ajax クラス ライブラリが読み込まれていますが、「データを読み込み中...」というメッセージのみが表示されます。データ。 。このとき、Ajax を介してデータベースからデータを取得するための JS スクリプトが必要です。 JS スクリプトは次のとおりです。


<script type="text/javascript">
 /**
 * setPage(url) 根据 url 从 article.php 中获取数据
 * @param int pageNum 页码
 * @return string
 */
 var cache=new Array(); // 缓存变量,当数据被访问过之后放置在缓存中,加快访问速度
 function setPage(pageNum) {
  var fpage = document.getElementById(&#39;fpage&#39;); // 获取 fpage 对象
  // 如果缓存中存在数据,那么直接从缓存中读取;如果不存在数据,那么就从数据库中读取,并把数据存入缓存
  if (typeof(cache[pageNum])==&#39;undefined&#39;) {
   var ajax = Ajax();
   ajax.get(&#39;article.php?page=&#39;+pageNum, function(data){
    fpage.innerHTML = data; // fpage对象的内容是从 article.php 中取来的
    cache[pageNum] = data;
   })
  } else {
   fpage.innerHTML = cache[pageNum];
  }
 }
 setPage(1); // 默认执行
</script>


上記のコードを注意深く読むと、次の現象がわかります。

1. setPage(pageNum) は、データベースからデータを抽出する JS 関数インターフェイスです。 2. Ajax は、article.php ファイルを通じてデータを取得します。
3.article.php?page=xx、xx は取得するページ番号のデータ、
setPage(1): 最初のページのデータを取得します。 setPage(2): 2 ページのデータを取得します。
setPage(100): 100 ページのデータを取得します。
...
それでは、article.php ファイルからデータを取得するにはどうすればよいでしょうか?以下のコードリストを参照してください。

article.php

<?php
/**
* $Id: article.php
* author Lee.
* Last modify $Date: 2012-01-21 16:53:05 $
*/
require_once &#39;./config.inc.php&#39;;
$m = new Model();
$page = new ajaxPage($m->total(&#39;article&#39;),20); // $m->total(&#39;article&#39;) 获取 article 表的记录数;10为每页显示十条
$result = $m->fetchAll(&#39;article&#39;, &#39;*&#39;, &#39;&#39;, &#39;&#39;, $page->limit); // 取出数据,^_^,很方便吧
echo &#39;<table align="center" border="1" width="1100" style="border-collapse:collapse;font-size:14px;" bordercolor="#666">&#39;;
echo &#39;<caption><h1 id="华强电子网资讯">华强电子网资讯</h1></caption>&#39;;
echo &#39;<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>&#39;;
foreach ($result as $v) {
 echo "<tr height=&#39;21&#39;><td align=&#39;center&#39;>{$v[&#39;id&#39;]}</td><td>{$v[&#39;title&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;author&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;source&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;date&#39;]}</td></tr>";
}
echo &#39;<tr><td align="right" colspan="5">&#39;.$page->fpage().&#39;</td></tr>&#39;;
echo &#39;</table>&#39;;
?>


article.phpで接続されているデータは、前回の記事で華強電子網から取得した情報データです。比較的データが大きいため、article.sqlファイルを添付します。誰もがテストできるようにコード パッケージをダウンロードします。

静的ページindex.htmlに表示されるデータは、article.phpファイル内のエコーコードです。

コード ファイル内の config.inc.php ファイルは主に、データベース ユーザー名、データベース パスワード、ホスト...、データベース接続クラス ライブラリ (Db.class.php)、データベース操作クラス ライブラリ (モデル.php)。

プログラムのレンダリング:

下の図は、注意を払うべき場所を示しています。

このようにして、Ajaxの非リフレッシュページングが完成します。プログラム内には説明していない ajaxPage.class.php もありますが、実はこの ajaxPage クラスライブラリの使い方は一般的なページングクラスライブラリと同じです。

つまり:

$page = new ajaxPage(记录总数, 每页显示数);


関連する推奨事項:

Ajaxの単純な実装

リフレッシュページングなし効果

php ajax

リフレッシュページングなし、サポート ID の位置決めサンプルコード

シンプルな Ajax

更新ページングなしEffect_AJAX 関連


以上がPHP+Ajaxを利用した非リフレッシュページング機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
unset()とsession_destroy()の違いは何ですか?unset()とsession_destroy()の違いは何ですか?May 04, 2025 am 12:19 AM

thedifferencebetferencefued fieneunset()andsession_destroy()isthatunset()clearsspecificsessionvariablesはsessionactiveであり、ssession_destroy()ターミナテンテンセッション

負荷分散のコンテキストでの粘着性セッション(セッションアフィニティ)とは何ですか?負荷分散のコンテキストでの粘着性セッション(セッションアフィニティ)とは何ですか?May 04, 2025 am 12:16 AM

StickysionsionsureuserRequestsoredtotheSameserverforsessiondataconsistency.1)Sessionidedificationisionidificationsisignivisionsignsignsuserstoserversusing okiesorurlmodifications.2)CondingRoutingDirectSSubSubSubsEntRequestStotheSameserver.3)LoadBalancingDistributeNewuser

PHPで利用可能なさまざまなセッション保存ハンドラーは何ですか?PHPで利用可能なさまざまなセッション保存ハンドラーは何ですか?May 04, 2025 am 12:14 AM

phpoffersvarioussionsionsavehandlers:1)ファイル:デフォルト、simplebutmaybottleneckonhigh-trafficsites.2)memcached:high-performance、yealforspeed-criticalapplications.3)redis:similartomcached、witordededpersistence.4)データベースの提供

PHPでのセッションとは何ですか?なぜそれらが使用されているのですか?PHPでのセッションとは何ですか?なぜそれらが使用されているのですか?May 04, 2025 am 12:12 AM

PHPでのセッションは、サーバー側のユーザーデータを保存して、複数のリクエスト間で状態を維持するメカニズムです。具体的には、1)セッションはsession_start()関数によって開始され、データは保存され、$ _Sessionスーパーグローバルアレイを読みます。 2)セッションデータはデフォルトでサーバーの一時ファイルに保存されますが、データベースまたはメモリストレージを介して最適化できます。 3)セッションを使用して、ユーザーのログインステータス追跡とショッピングカート管理機能を実現できます。 4)セッションの安全な送信とパフォーマンスの最適化に注意を払い、アプリケーションのセキュリティと効率を確保します。

PHPセッションのライフサイクルを説明してください。PHPセッションのライフサイクルを説明してください。May 04, 2025 am 12:04 AM

phpssionsStartWithsession_start()、figenateAuniqueidandcreateSaServerfile; theySistacrossRequestsandcanbemanbemanBeithsession_destroy()

絶対的なセッションタイムアウトとアイドルセッションのタイムアウトの違いは何ですか?絶対的なセッションタイムアウトとアイドルセッションのタイムアウトの違いは何ですか?May 03, 2025 am 12:21 AM

絶対セッションのタイムアウトはセッションの作成時に開始され、アイドルセッションタイムアウトはユーザーの操作なしに開始されます。絶対セッションタイムアウトは、金融アプリケーションなど、セッションライフサイクルの厳格な制御が必要なシナリオに適しています。アイドルセッションタイムアウトは、ソーシャルメディアなど、ユーザーが長い間セッションをアクティブに保つことを望んでいるアプリケーションに適しています。

セッションがサーバーで機能していない場合、どのような措置を講じますか?セッションがサーバーで機能していない場合、どのような措置を講じますか?May 03, 2025 am 12:19 AM

サーバーセッションの障害は、手順に従って解決できます。1。セッションが正しく設定されていることを確認するために、サーバーの構成を確認します。 2.クライアントCookieを確認し、ブラウザがそれをサポートしていることを確認し、正しく送信します。 3. Redisなどのセッションストレージサービスを確認して、それらが正常に動作していることを確認します。 4.アプリケーションコードを確認して、正しいセッションロジックを確認します。これらの手順を通じて、会話の問題を効果的に診断および修復し、ユーザーエクスペリエンスを改善することができます。

session_start()関数の重要性は何ですか?session_start()関数の重要性は何ですか?May 03, 2025 am 12:18 AM

session_start()iscrucialinphpformangingusersions.1)itInitiateSanewsessionifnoneExists、2)resumesanexistingsession、および3)SetSessionCookieforcontinuityAcrossRequests、ApplicationslicationSliviseSlikeUserauthicationAnticatent。

See all articles

ホット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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

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

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。