php ajax jquery implements click to load more content_jquery

We can encounter such an application on some Weibo websites. The Weibo content list does not use paging bars. Instead, a certain number of records are loaded at one time and displayed on the list page. When the user browses to the bottom of the list page, he can Click "View More" to load more records. In this article, I will tell you how to implement this application using jQuery and PHP.

Basic principle: When the page is loaded, jQuery requests data from the background, and PHP displays the latest records on the list page by querying the database. There is a "more" link at the bottom of the list page. By triggering the link, Send an Ajax request to the server. The background PHP program gets the request parameters and responds. It obtains the corresponding records from the database and returns them to the front-end page in the form of JSON. The front-end page jQuery parses the JSON data and appends the data to the list page. In fact, it is the Ajax paging effect.

First of all, we need to introduce the jquery library and jquery.more.js plug-in. jquery.more.js has already encapsulated many functions and provided the function of parameter configuration.

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

The 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">::点击加载更多内容::</a> 
</div> 

It is worth mentioning that the styles single_item and get_more are related to the jquery.more.js plug-in. You can also choose another class name, but you must write the corresponding class when configuring.

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 above CSS is customized in this example. Of course, you can customize different styles in actual projects. Note that more_loader_spinner defines loading animated images.

jQuery

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

It is very simple to use. Configure the backend address: data.php to see how data.php processes data.

PHP

data.php links to the database. This example uses the same data table as the article on this site.

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 two parameters submitted by the front page. $_POST['last'] is the number of records to start, and $_POST['amount'] is the number of records displayed at a time. You can understand it by looking at the SQL statement. In fact, it is Statements used in paging.

Then output the query results in JSON format, and the PHP task is completed.

Finally, let’s take a look at the parameter configuration of jquery.more.js.

'amount' : '10', //The number of records displayed each time
'address' : 'comments.php', //Request the address of the background
'format' : 'json', //Data transmission format
'template' : '.single_item', //html records the class attribute of DIV
'trigger' : '.get_more', //Class attribute that triggers loading of more records
'scroll' : 'false', //Whether scrolling trigger loading is supported
'offset' : '100', //Offset when scrolling triggers loading

The above is the entire content of this article, I hope you all like it.