php+jquery+html Implementation Click Do not refresh load More instance code _php instance

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.

Html

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> 

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>   

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} 

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 this website article Php+mysql+jquery realizes publishes the microblog program--php the same data table.

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 '])    
; 
} 

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 '   :  ',/      //Show record number 
'   address ':  ' comments.php ',//Request background 
' format '   :  ' json ',     //Data transmission Format 
' template '  :  '. Single_item ',//html record div's class attribute 
' Trigger '   :  '. Get_more ',  //triggering the class attribute 
' scroll ': ' false ' to load more records,//    whether to support scrolling trigger load 
' offset '   :  ' 100 ',     

This demo needs to click to load more content, the next article I will make through the scroll bar to trigger loading more content Domo, please pay attention.

The above article php+jquery+html implementation Click Do not refresh loading more instance code is small to share all the content of everyone, hope to give you a reference, but also hope that we support cloud habitat community.