php+ajax+jquery implementation click to load more content

  • 2020-06-03 05:51:55
  • OfStack

We can encounter such an application on some microblog websites. Instead of using pager bar, a certain number of records are displayed on the list page once loaded. When users browse to the bottom of the list page, they can load more records by clicking "View more". In this article, I'll combine jQuery and PHP to show you how to do this.

Basic principle: when the page loads, jQuery request data to the background, PHP by querying the database page will display the latest a few records in the list, the list has a "more" link on the bottom of the page, by triggering the link, send Ajax requests to the server, the background PHP program get request parameters, and accordingly, to obtain the corresponding database record and back to the front desk page, in the form of JSON alle jQuery parsing JSON data, and the data appended to the list page. It's actually Ajax pagination.

The first step is to introduce the jquery library and the ES18en.more.js plug-in. jquery.more.js has packaged many functions and provides parameter configuration.


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

xhtml structure is as follows:


<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">:: Click to load more ::</a> 
</div> 

It is worth mentioning that the styles single_item and get_more are associated with the jquery.more.js plug-in. You can also take another class name, but the corresponding class must be written at configuration time.

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

The CSS above is customized for this example, but of course you can customize different styles in a real project. Note that more_loader_spinner is defined to load animated images.

jQuery


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

It's easy to use, with the background address: data.php configured to see how data.php handles the data.

PHP

data. php linked database. This example USES the same data table as this article.


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 receives the two parameters submitted by the foreground page. $_POST['last'] is the beginning of the record number, and $_POST['amount'] is the number of records displayed once.

The result of the query is then output in JSON format, and the task of PHP is completed.

Finally, take a look at the configuration of jquery.more.js parameters.

'amount' : '10', // Number of records displayed per time
'address' : 'comments.php ', // Request background address
'format' : 'json', // Data transfer format
'template' : '.single_item', //html records the class attribute of DIV
'trigger' : '.get_more', // triggers the class attribute to load more records
'scroll' : 'false', // Whether scroll-triggered loading is supported
'offset' : '100', // The offset when the scroll triggers the load

This is the end of this article, I hope you enjoy it.


Related articles: