jQuery+PHP+ajax implements the function of loading more content lists on Weibo_PHP tutorial

We can often see such applications on some Weibo websites. The Weibo content list does not use paging bars. Instead, a certain number of records are loaded at a time and displayed on the list page. When the user browses to the bottom of the list page , you can load more records by clicking "View More". This article will combine jQuery and PHP to tell you how to implement this function.

Basic principle of Ajax loading: When the page loads, jQuery requests data from the background, and PHP queries the database to display the latest records on the list page. There is a "View More" link at the bottom of the list page. , By triggering the link, an Ajax request is sent to the server. The background PHP program gets the request parameters and responds, obtains the corresponding record from the database and returns it to the front-end page in the form of JSON. The front-end page jQuery parses the JSON data, and Append data to 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>

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 should be pointed out that the styles single_item and get_more are related to the jquery.more.js plug-in. You can also take another class name, but you must write the corresponding class when configuring.

CSS style is as follows:

#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 part is as follows:

$(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 part:

data.php file:

Link database:

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 PHP's task is completed.

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

'amount'  : '10',   //每次显示记录数 
'address'  : 'comments.php', //请求后台的地址 
'format'  : 'json',   //数据传输格式 
'template' : '.single_item', //html记录DIV的class属性 
'trigger'  : '.get_more', //触发加载更多记录的class属性 
'scroll'  : 'false',  //是否支持滚动触发加载 
'offset'  : '100',   //滚动触发加载时的偏移量