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

Today, I would like to share with you how to use php+jquery+html to achieve click-not-refresh loading effect of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

HTML

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.

PHP

Data.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.

Finally, 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 of the class attribute 'scroll':' false', / / whether scrolling trigger loading 'offset':' 100 records is supported, / / the offset during scrolling trigger loading is all the contents of the article "how to use php+jquery+html to achieve click-to-no-refresh loading effect" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.