Php + jquery + html, click to load more instance code without refreshing, jquery instance

Php + jquery + html, click to load more instance code without refreshing, jquery instance

Basic principle: 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 "more" link at the bottom of the list page. By triggering this link, an Ajax request is sent to the server. the backend PHP program obtains the Request Parameters and makes the corresponding response, obtain the database records and return them to the front-end page in JSON format. jQuery parses JSON data on the front-end page and appends the data to the List page. It is actually the Ajax paging effect.

HTML

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> 

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 class = "content"> </div> <a href = "javascript :; "class =" get_more ">:: click to load more content: </a> </div>

It is worth mentioning 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

#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

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

Data. php links to the database. In this example, we use this Site Article PHP + Mysql + jQuery to publish Weibo programs-the same data table in PHP.

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 at the 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

In this DEMO, You need to click to load more content. In the next article, I will create a DOMO that triggers loading more content through the scroll bar. Stay tuned.

The above php + jquery + html implementation click not to refresh and load more instance code is all the content that I share with you. I hope to give you a reference, we also hope that you can support the customer's home.