PHP Ajax JQuery implementiert Klicken Sie, um mehr Content_JQuery zu laden

Eine solche Anwendung kann auf einigen Weibo-Websites auftreten. Die Weibo-Inhaltsliste verwendet keine Paging-Leisten. Stattdessen wird eine bestimmte Anzahl von Datensätzen gleichzeitig geladen und auf der Listenseite angezeigt Auf der Listenseite kann er auf „Mehr anzeigen“ klicken, um weitere Datensätze zu laden. In diesem Artikel erkläre ich Ihnen, wie Sie diese Anwendung mit jQuery und PHP implementieren.

Grundprinzip: Wenn die Seite geladen wird, fordert jQuery Daten aus dem Hintergrund an und PHP zeigt die neuesten Datensätze auf der Listenseite an, indem es die Datenbank abfragt. Am Ende der Listenseite befindet sich ein Link Beim Auslösen des Links wird eine Ajax-Anfrage an den Server gesendet. Das PHP-Hintergrundprogramm ruft die entsprechenden Datensätze aus der Datenbank ab und gibt sie in Form von JSON zurück Seite jQuery analysiert die JSON-Daten und hängt die Daten an die Listenseite an. Tatsächlich handelt es sich um den Ajax-Paging-Effekt.

Zuerst müssen wir die jquery-Bibliothek und das jquery.more.js-Plug-in vorstellen. jquery.more.js hat bereits viele Funktionen gekapselt und die Funktion der Parameterkonfiguration bereitgestellt.

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

Die XHTML-Struktur ist wie folgt:

<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> 

Es ist erwähnenswert, dass die Stile single_item und get_more mit dem Plug-In jquery.more.js zusammenhängen. Sie können auch einen anderen Klassennamen wählen, müssen jedoch bei der Konfiguration die entsprechende Klasse schreiben.

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;} 

Das obige CSS ist in diesem Beispiel angepasst. Natürlich können Sie in tatsächlichen Projekten verschiedene Stile anpassen. Beachten Sie, dass more_loader_spinner das Laden animierter Bilder definiert.

jQuery

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

Die Verwendung ist sehr einfach. Konfigurieren Sie die Backend-Adresse: data.php, um zu sehen, wie data.php Daten verarbeitet.

PHP

data.php verweist auf die Datenbank. Dieses Beispiel verwendet dieselbe Datentabelle wie der Artikel auf dieser Website.

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 empfängt zwei Parameter, die von der Startseite übermittelt werden: $_POST['last'] ist die Anzahl der zu startenden Datensätze und $_POST['amount'] ist die Anzahl der gleichzeitig angezeigten Datensätze Verstehen Sie es, indem Sie sich die SQL-Anweisung ansehen. Tatsächlich handelt es sich um Anweisungen, die beim Paging verwendet werden.

Geben Sie dann die Abfrageergebnisse im JSON-Format aus und die PHP-Aufgabe ist abgeschlossen.

Schließlich werfen wir einen Blick auf die Parameterkonfiguration von jquery.more.js.

'amount': '10', //Die Anzahl der Datensätze, die jedes Mal angezeigt werden
'address': 'comments.php', //Anfordern der Adresse des Hintergrunds
'format': 'json', //Datenübertragungsformat
'template': '.single_item', //html zeichnet das Klassenattribut von DIV
auf 'trigger': '.get_more', //Klassenattribut, das das Laden weiterer Datensätze auslöst
'scroll': 'false', //Ob das Laden von Scroll-Triggern unterstützt wird
'offset': '100', //Offset, wenn Scrollen das Laden auslöst

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.