一部の Weibo ウェブサイトでは、このようなアプリケーションがよく見られます。Weibo コンテンツ リストでは、ページング バーが使用されず、ユーザーがリスト ページの下部を参照すると、一度に一定数のレコードが読み込まれます。リスト ページでは、[もっと見る] をクリックしてさらにレコードを読み込むことができます。この記事では、jQuery と PHP を組み合わせて、この関数を実装する方法を説明します。
Ajax 読み込みの基本原理: ページが読み込まれると、jQuery がバックグラウンドからデータをリクエストし、PHP がデータベースにクエリを実行してリスト ページに最新のレコードを表示します。リスト ページの下部に [View More] リンクがあります。 , リンクをトリガーすると、Ajax リクエストがサーバーに送信され、バックグラウンドの PHP プログラムがリクエスト パラメーターを取得して応答し、データベースから対応するレコードを取得して、JSON 形式でフロントエンド ページに返します。フロントエンド ページの jQuery は JSON データを解析し、そのデータをリスト ページ に追加します。実際、これは Ajax ページング効果です。
まず、jquery ライブラリと jquery.more.js プラグインを紹介します。jquery.more.js はすでに多くの関数をカプセル化し、パラメーター設定関数を提供しています。
xhtml 構造は次のとおりです:
スタイル single_item と get_more は jquery.more.js プラグインに関連していることに注意してください。別のクラス名を使用することもできますが、設定時に対応するクラスを記述する必要があります。
CSSスタイルは次のとおりです:
上記の CSS はこの例でカスタマイズされています。もちろん、実際のプロジェクトではさまざまなスタイルをカスタマイズできます。 more_loader_spinner はアニメーション画像の読み込みを定義していることに注意してください。
jQuery部分は以下の通りです:
使用方法は非常に簡単です。バックエンド アドレス data.php を設定して、data.php がデータを処理する方法を確認します。
PHP パート:
data.php ファイル:
リンクデータベース:
data.php は、フロントページによって送信された 2 つのパラメーターを受け取ります。$_POST['last'] は開始するレコードの数であり、$_POST['amount'] は一度に表示されるレコードの数です。 SQL ステートメントを確認すると、実際にはページング ステートメントが使用されます。
あとはクエリ結果をJSON形式で出力すればPHPの作業は完了です。
最後にjquery.more.jsのパラメータ設定を見てみましょう:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
