Php+ajax+jquery implementation Click to load more content _jquery

We can run into this application on some microblogging sites where the microblogging content list does not use pagination, but loads a number of records at a time to display on the list page, and you can load more records by clicking View More when the user browses to the bottom of the list page. In this article I will combine jquery and PHP to tell you how to implement this application.

Basic principle: When the page is loaded, jquery requests data back to the table, PHP queries the database to display the latest several records on the list page, at the bottom of the list page there is a "more" link, by triggering the link to send AJAX requests to the server, the background PHP program to get request parameters, and make corresponding, Get the corresponding records of the database and return to the foreground page as JSON, the front page jquery parses the JSON data and appends the data to the list page. is actually an AJAX paging effect.

The first is to introduce the jquery library and the Jquery.more.js plug-in, Jquery.more.js has encapsulated many functions and provided the function of parameter configuration.

<script type= "Text/javascript" src= "jquery.js" ></script> <script type= "Text/javascript" 
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":: Click to load more content::</a> 
</div> 

It is worth mentioning that the style single_item,get_more is associated with the Jquery.more.js plug-in, you can also take another class name, but in the configuration of the corresponding class must be written.

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 the actual project. Note that More_loader_spinner is the definition of loading animated pictures.

Jquery

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

Use is very simple, configured the background address: data.php, to see how data.php processing data.

Php

data.php Link Database, this example uses the same data table of this site article.

Require_once (' connect.php '); 
 
$last = $_post[' last ']; 
$amount = $_post[' amount ']; 
 
$user = Array (' Demo1 ', ' Demo2 ', ' Demo3 ', ' Demo3 ', ' Demo4 '); 
$query =mysql_query ("select * from say" 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 receive the front page submitted over the two parameters, $_post[' Last ' is the beginning of the record number, $_post[' amount '] that is, a single display of records, see the SQL statement to understand, in fact, is the statement used in the page.

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

Finally look at the parameters of the Jquery.more.js configuration.

' Amount ': ' 10 ',//per display record number
' Address ': ' comments.php ',//request background addresses
' Format ': ' JSON ',//Data transmission format
' Template ': '. Single_item ',//html record div's class attribute
' Trigger ': '. Get_more ',//Trigger class attribute to load more records
' Scroll ': ' false ',//whether the rolling trigger load is supported
' Offset ': ' 100 ',//offset at the time of rolling trigger loading

The above mentioned is the entire content of this article, I hope you can enjoy.