PHP+ajax は更新を行わずに動的データ読み込みテクノロジーを実装します_PHP チュートリアル
- WBOYオリジナル
- 2016-07-13 09:55:27762ブラウズ
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 を定義します。
その後、データテーブルをクエリして結果セットを取得し、ループで出力します。 コードは次のとおりです。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
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. 次に、ページをスクロールするときに行う必要があるのは、ページの合計の高さを計算する（一番下までスクロールすると、ページに新しいデータが読み込まれるため、ページの合計の高さは動的に変化します）、スクロールバーの位置を計算するです。 (スクロール バーの位置も (ロードされたページの高さに応じて動的に変化します)、相対的な比率を計算する式を構築します。
?
| 1 2 3 4 5
|
$(ウィンドウ).scroll(function() { var pageH = $(document.body).height() //ページの合計高さ ; varscrollT = $(window).scrollTop() //スクロールバーの上部; var aa = (pageH-winH-scrollT)/winH;});
|
|
1 2 3 4 5 |
if(aa $.getJSON("result.php",{page:i},function(json){ ...... }); } |
4. リクエストの応答が正常に JSON データを返した場合は、JSON データを解析してページの DIV#container にデータを追加します。JSON データが返されない場合は、すべてのデータが表示されたことを意味します
。?
|
1 2 3 4 5 6 7 8 9 10 11 |
if(json){ var str = ""; $.each(json,function(index,array){ //トラバース var str = "..." //JSONデータを取得します ;$("#container").append(str); //追加 }); i++ //ページ数+1 ;}その他{ $(".nodata").show().html("スクロールをやめて、終わりです..."); false を返す; } |
完全な jQuery コードは次のとおりです:
?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(関数(){ 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 += " ";var str += " "+array['content']+" $("#container").append(str); }); i++; }その他{ $(".nodata").show().html("スクロールをやめて、終わりです..."); false を返す; } }); } }); }); |
result.php
ページの一番下までスクロールすると、フロントエンドの Ajax リクエストは result.php に対して行われ、バックグラウンド プログラムは、リクエストされたデータ ページ番号: page に従ってデータ テーブル内の対応するレコードをクエリし、に設定されたレコードを出力します。 json 形式に変換し、処理のためにフロントエンドに返します。
?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
require_once('connect.php') //データベースに接続します
$user = array('demo1','demo2','demo3','demo3','demo4'); $page = intval($_GET['page']) //要求されたページ番号を取得します $start = $page*15; $query=mysql_query("select * from Say order by ID desc limit $start,15"); while ($row=mysql_fetch_array($query)) { $arr[] = 配列( 'コンテンツ'=>$row['コンテンツ'], '作成者'=>$user[$row['userid']], 'date'=>date('m-d H:i',$row['addtime']) ); } echo json_encode($arr); //json データ出力に変換します |
さて、この記事の紹介は終わりました。効果を確認してください。
以上がこの記事の全内容ですが、皆さんに気に入っていただければ幸いです。