PHP+ajax は更新を行わずに動的データ読み込みテクノロジーを実装します

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

WBOY

リリース： 2016-07-13 09:55:27

オリジナル

777 人が閲覧しました

php+ajaxはリフレッシュせずに動的にデータをロードする技術を実現します

リフレッシュ以外の関数をたくさん使いますが、ここでphp+ajaxを実装してリフレッシュせずにスクロールするデータロードを実現する例を紹介します。この例は非常に優れています。手順は簡単です。手順に従うだけです。

いくつかの 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 を定義します。

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

require_once('connect.php');

$user = array('demo1','demo2','demo3','demo3','demo4');

$query=mysql_query("select * from Say order by ID desc limit 0,15");

while ($row=mysql_fetch_array($query)) {

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

jQuery

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

コードは以下の通りです:

var winH = $(window).height();

2. 次に、ページをスクロールするときに行う必要があるのは、ページの合計の高さを計算する（一番下までスクロールすると、ページに新しいデータが読み込まれるため、ページの合計の高さは動的に変化します）、スクロールバーの位置を計算するです。 (スクロールバーの位置も (ロードされたページの高さに応じて動的に変化します)、相対的な比率を計算する式を構築します。

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

$(ウィンドウ).scroll(function() {

var pageH = $(document.body).height() //ページの合計高さ

;

varscrollT = $(window).scrollTop() //スクロールバーの上部

;

var aa = (pageH-winH-scrollT)/winH;

});

if(aa

$.getJSON("result.php",{page:i},function(json){

......

});

}

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

。

if(json){

var str = "";

$.each(json,function(index,array){ //トラバース

var str = "..." //JSONデータを取得します

;

$("#container").append(str); //追加

});

i++ //ページ数+1

;

}その他{

$(".nodata").show().html("スクロールをやめて、終わりです...");

false を返す;

}

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

$(関数(){

var winH = $(window).height() //ページの表示領域の高さ

;

var i = 1 //現在のページ番号を設定します

$(ウィンドウ).scroll(function() {

var pageH = $(document.body).height();

varscrollT = $(window).scrollTop() //スクロールバーの上部

;

var aa = (pageH-winH-scrollT)/winH;

if(aa

$.getJSON("result.php",{page:i},function(json){

if(json){

var str = "";

$.each(json,function(index,array){

var str = "

var str += "

"+array['date']+"

var str += "

"+array['author']+"

var str += "

"+array['content']+"

$("#container").append(str);

});

i++;

}その他{

$(".nodata").show().html("スクロールをやめて、終わりです...");

false を返す;

}

});

}

});

result.php

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