php ajax jqueryはクリックしてさらに読み込むcontent_jqueryを実装します

一部の Weibo ウェブサイトでは、このようなアプリケーションが発生することがあります。Weibo コンテンツ リストではページング バーが使用されず、ユーザーがリスト ページを参照すると、一度に一定数のレコードが読み込まれます。リスト ページの [さらに表示] をクリックして、さらにレコードを読み込むことができます。この記事では、jQuery と PHP を使用してこのアプリケーションを実装する方法を説明します。

基本原則: ページがロードされると、jQuery がバックグラウンドからデータを要求し、PHP がデータベースにクエリを実行してリスト ページに最新のレコードを表示します。リスト ページの下部に「詳細」リンクがあります。リンクをトリガーすると、Ajax リクエストがサーバーに送信され、バックグラウンドの PHP プログラムがリクエスト パラメーターを取得して応答し、データベースから対応するレコードを JSON 形式でフロントエンド ページに返します。ページ jQuery は JSON データを解析し、そのデータをリスト ページに追加します。実際、これは Ajax ページング効果です。

まず、jquery ライブラリと jquery.more.js プラグインを導入する必要があります。jquery.more.js はすでに多くの関数をカプセル化しており、パラメーター設定の機能を提供しています。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.more.js"></script> 

xhtml の構造は次のとおりです:

<div id="more"> 
   <div class="single_item"> 
      <div class="element_head"> 
        <div class="date"></div> 
        <div class="author"></div> 
      </div> 
      <div class="content"></div> 
   </div> 
   <a href="javascript:;" class="get_more">::点击加载更多内容::</a> 
</div> 

スタイル single_item と get_more は jquery.more.js プラグインに関連していることに注意してください。別のクラス名を選択することもできますが、設定時に対応するクラスを記述する必要があります。

CSS

#more{margin:10px auto;width: 560px; border: 1px solid #999;}        
.single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;} 
.author{position: absolute; left: 0px; font-weight:bold; color:#39f} 
.date{position: absolute; right: 0px; color:#999} 
.content{line-height:20px; word-break: break-all;} 
.element_head{width: 100%; position: relative; height: 20px;} 
.get_more{margin:10px; text-align:center} 
.more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) 
 no-repeat;} 

この例では上記の CSS をカスタマイズしています。もちろん、実際のプロジェクトではさまざまなスタイルをカスタマイズできます。 more_loader_spinner はアニメーション画像の読み込みを定義していることに注意してください。

jQuery

$(function(){ 
  $('#more').more({'address': 'data.php'}) 
}); 

バックエンド アドレス data.php を設定して、data.php がデータをどのように処理するかを確認するのは非常に簡単です。

PHP

data.php はデータベースにリンクします。この例では、このサイトの記事と同じデータ テーブルを使用します。

require_once('connect.php'); 
 
$last = $_POST['last']; 
$amount = $_POST['amount']; 
 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
$query=mysql_query("select * from say order by id desc limit $last,$amount"); 
while ($row=mysql_fetch_array($query)) { 
  $sayList[] = array( 
    'content'=>$row['content'], 
    'author'=>$user[$row['userid']], 
    'date'=>date('m-d H:i',$row['addtime']) 
   ); 
} 
echo json_encode($sayList); 

data.php は、フロント ページによって送信された 2 つのパラメーターを受け取ります。$_POST['last'] は開始するレコードの数、$_POST['amount'] は一度に表示されるレコードの数です。実際、これはページングで使用されるステートメントです。

その後、クエリ結果を JSON 形式で出力し、PHP タスクは完了です。

最後に、jquery.more.jsのパラメータ構成を見てみましょう。

'amount' : '10', //毎回表示されるレコード数
'address' : 'comments.php', //背景のアドレスを要求
'format' : 'json', //データ送信形式
'template' : '.single_item', //html は DIV
のクラス属性を記録します 'trigger' : '.get_more', //追加のレコードのロードをトリガーするクラス属性
'scroll' : 'false', //スクロールトリガーの読み込みがサポートされているかどうか
'offset' : '100', //スクロールが読み込みをトリガーするときのオフセット

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