Shulou(Shulou.com)06/01 Report--

This article mainly introduces jQuery+PHP how to achieve browsing more content related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this jQuery+PHP how to browse more content articles will have a harvest, let's take a look.

Basic principle: when the page is loaded, jQuery requests data from the background, PHP displays several records of * * on the list page by querying the database, and there is a "more" link at the bottom of the list page. By triggering the link, the Ajax request is sent to the server, and the background PHP program gets the request parameters and makes the corresponding response, obtains the corresponding records of the database and returns them to the foreground page in the form of JSON, and the foreground page jQuery parses the JSON data. And append the data to the list page. In fact, it is the Ajax paging effect.

XHTML

The first step is to introduce the jquery library and the jquery.more.js plug-in. Jquery.more.js has encapsulated many functions and provides the ability to configure parameters.

The structure of xhtml is as follows:

:: click to load more:

It is worth mentioning that the style single_item,get_more is associated with the jquery.more.js plug-in, you can also choose another class name, but be sure to write the corresponding class when configuring.

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 defined to load animated images.

JQuery

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

Easy to use, configure the background address: data.php to see how data.php handles the data.

PHPdata.php links to the database, this example uses the local article PHP+Mysql+jQuery to publish Weibo 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 order by id desc limit $last,$amount") While ($row=mysql_fetch_array ($query)) {$sayList [] = array ('content'= > $row [' content'], 'author'= > $user [$row [' userid']], 'date'= > date);} echo json_encode ($sayList)

Data.php receives the two parameters submitted by the foreground page, $_ POST ['last'] starts the number of records, and $_ POST [' amount'] displays the number of records at a time. You can see the SQL statement, which is actually the statement used in paging.

Then output the results of the query in JSON format, and the task of PHP is complete.

* Let's take a look at the parameter configuration of jquery.more.js.

'amount':' 10records, / / display the number of records at a time 'address':' comments.php', / / request backend address' format': 'json', / / data transfer format' template': '.single_item', / / html record DIV's class attribute' trigger':'. Get_more' / / trigger loading more records class attribute 'scroll':' false', / / whether scrolling trigger loading 'offset':' 100 records is supported, / / offset during scrolling trigger loading. This is the end of the article on "how jQuery+PHP can browse more content". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to browse more content in jQuery+PHP". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.