jquery+php implementation Browse more content

The basic principle of Ajax loading: When the page is loaded, jquery requests the data back to the table, and PHP displays the most recent records on the list page by querying the database, and there is a "see more" link at the bottom of the list page, which, by triggering the link, sends an AJAX request to the server. The background PHP program gets the request parameters and responds, obtains the database corresponding records and returns to the foreground page in JSON form, the foreground page jquery parses the JSON data, and appends the data to the list page. Ajax is actually a paging effect. To introduce the jquery library and the Jquery.more.js plug-in first, 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" 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":: Click load more Content::</a> </ Div>

It should be noted 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 styles are 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; c Olor: #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 the different styles in the actual project. Note that More_loader_spinner is defined to load the animated picture. The jquery section is as follows:

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

Use very simple, configure the back office address: data.php, see data.php is how to deal with the data. PHP section: data.php File: Link database:

<?php require_once (' connect.php '); 　　$last = $_post[' last ']; 　　$amount = $_post[' amount '); 　　$user = Array (' Demo1 ', ' Demo2 ', ' Demo3 ', ' Demo3 ', ' Demo4 '); 　　$query =mysql_query ("select * from say the ORDER by id desc limit $last, $amount"); while ($row =mysql_fetch_array ($query)) {  $sayList [] = array (   ' content ' = = $row [' content '],   ' a 　　Uthor ' = $user [$row [' userid '],  ' Date ' =>date (' m-d h:i ', $row [' Addtime '])  ; } Echo Json_encode ($sayList);

data.php receive the front page submitted by the two parameters, $_post['last'] that is the beginning of the number of records, $_post['amount  that is, asingle time to display the number of records, see the SQL statement to understand, in fact, is the page used in the statement. The results of the query are then output in JSON format, and the PHP task is completed. Finally, consider the configuration of the Jquery.more.js parameter:

' Amount ': ' $ '  ,   //Show Record count ' address '  : ' comments.php ',//Request background Address ' format '  : ' json ',   //data transfer format ' Template ': '. Single_item ',//html record div's class attribute ' trigger '  : '. Get_more ',//trigger to load more records for Class attribute ' scroll '  : ' FAL Se ',//  whether support scrolling trigger load ' offset '  : ' + ',   //Roll trigger offset at load time

jquery+php implementation Browse more content