php+ajax は更新せずに動的データ読み込みテクノロジーを実装します。phpajax_PHP チュートリアル

php+ajax は、phpajax を更新せずに動的データ読み込みテクノロジーを実装します

一部の Web ページを閲覧するとき、ブラウザのスクロール バーがページの一番下まで引っ張られると、ページは自動的にさらに多くのコンテンツを読み込み続けます。ユーザーが閲覧できるようになります。この技術をスクロールローディング技術と呼ぶことにします。多くの Web サイトがこのテクノロジーを使用しており、Bing 画像検索、Sina Weibo、QQ Zone などがこのテクノロジーを完全に適用していることがわかりました。

スクロール ローディング テクノロジは、JavaScript を使用してスクロール バーの位置を監視し、スクロール バーがブラウザ ウィンドウの下部に到達するたびに、バックグラウンドの PHP プログラムに対して Ajax リクエストがトリガーされ、対応するデータが返されます。したがって、動的ロードの実現は、実際には典型的な Ajax アプリケーションです。この記事では、jQuery を PHP、mysql、JSON と組み合わせて使用​​し、スクロール ローディング テクノロジをプロジェクトに適用する方法を説明します。もちろん、この記事を読む前提条件として、jQuery と PHP の基本的な知識が必要です。

index.php

デフォルトでは15個のデータを表示したいので、最初にデータベースから最初の15個のデータを取得してページに表示します。また、新しく読み込んだデータを一度に15個ずつ表示します。

説明をできるだけ簡単にするために、ネイティブの PHP と mysql のクエリ ステートメントを使用します。まず、接続情報を含む connect.php を含めてデータベースに接続する必要があります。ここでは、いくつかのユーザー ID を定義します。

次に、データテーブルをクエリし、結果セットを取得し、それをループで出力します。コードは次のとおりです。
リーリー

注: この例で使用されているデータは、このサイトの記事からのものです。この記事には、データ テーブルの作成に関する概要が含まれています。

jQuery

1. まず、ブラウザの表示領域ページの高さを取得する必要があります。

コードをコピーします コードは次のとおりです: var winH = $(window).height(); 2. 次に、ページをスクロールするときに行う必要があることは次のとおりです: ページの合計の高さを計算し (一番下までスクロールすると、ページに新しいデータが読み込まれるため、ページの合計の高さは動的に変化します)、スクロール バーの位置を計算します。 (スクロール バーの位置も (読み込まれたページの高さが変化すると動的に変化します)、相対的な比率を計算する式を構築します。

リーリー

3. スクロール バーがページの下部に近づくと、ajax の読み込みがトリガーされます。この例では、jQuery の getJSON メソッドを使用して、リクエスト パラメーターは page です。ページ数。

リーリー

4. リクエストの応答が正常に JSON データを返した場合、JSON データを解析し、そのデータをページの DIV#container に追加します。JSON データが返されない場合は、すべてのデータが表示されたことを意味します。
リーリー

完全な jQuery コードは次のとおりです:

リーリー

結果.php

ページの一番下までスクロールすると、フロントエンドの Ajax リクエストは result.php に対して行われ、バックグラウンド プログラムはリクエストされたデータ ページ: ページに従ってデータ テーブル内の対応するレコードをクエリし、json に設定されたレコードを出力します。フォーマットしてフロントエンドに返して処理します。
リーリー

さて、この記事の紹介はここで終わります。効果を確認してください。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

http://www.bkjia.com/PHPjc/991804.html

www.bkjia.com

tru​​ehttp://www.bkjia.com/PHPjc/991804.html技術記事 php+ajax は、更新せずにデータを動的にロードするテクノロジー、phpajax を実装します。Web ページを閲覧するときに、ブラウザのスクロール バーがページの一番下まで引っ張られると、ページは自動的にさらに多くのコンテンツをロードし続けます。