JQuery + PHP + ajax enables Weibo to load more content lists

On Some Weibo websites, we often see such an application. The Weibo content list does not use pagination entries. Instead, a certain number of records are loaded at a time and displayed on the list page, when you browse to the bottom of the list page, you can click "view more" to load more records. This article uses jQuery and PHP to show you how to implement this function.

Basic Principles of Ajax loading: When a page is loaded, jQuery requests data from the background. 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,This link is triggered to send an Ajax request to the server. the backend PHP program obtains the Request Parameters and responds to the request. It obtains the corresponding database records and returns them to the front-end page in JSON format, on the front-end page, jQuery parses JSON data and appends the data to the List page.. It is actually the Ajax paging effect.

First, introduce the jquery library and jquery. more. js plug-in. jquery. more. js has encapsulated many functions and provided the parameter configuration function.

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

Xhtml StructureAs follows:

<Div id = "more"> <div class = "single_item"> <div class = "element_head"> <div class = "date"> </div> <div class = "author"> </div> <div class = "content"> </div> <a href = "javascript :; "class =" get_more ">:: click to load more content: </a> </div>

It should be noted that the style single_item and get_more are jquery. more. if the js plug-in is associated, you can also use another class name, but you must write the corresponding class during configuration.

CSS styleAs 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 the animation image to be loaded.

JQuery SectionAs follows:

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

It's easy to use. I configured the backend address: data. php to see how data. php processes data.

PHP Section:

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. the php receives two parameters submitted on the front-end page. $ _ POST ['last'] indicates the number of start records, and $ _ POST ['amount'] indicates the number of records displayed at a time, the SQL statement is actually the statement used in paging.
Then, output the query results in JSON format, and the PHP task is completed.

Finally, let's take a look.Parameter configuration of jquery. more. js:

'Amount ': '10', // number of records displayed each time 'address': 'comments. php ', // request backend address 'format': 'json', // Data Transmission format 'template ':'. single_item ', // The class Attribute 'trigger' of the html record DIV ':'. get_more ', // The class Attribute 'scroll': 'false' that triggers loading more records. // whether the 'offset ': '200' can be rolled to trigger loading ', // The offset of rolling trigger Loading