Shulou(Shulou.com)05/31 Report--

This article editor for you detailed introduction of "php+jquery+html how to click do not refresh load", the content is detailed, the steps are clear, the details are handled properly, I hope this "php+jquery+html how to achieve click not refresh load" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Basic principle: when the page is loaded, jQuery requests data from the background, PHP displays the latest records 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.

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 the class attribute 'scroll':' false', / / whether scrolling trigger loading 'offset':' 100 records is supported, / / the offset of scrolling trigger loading is read here. This article "php+jquery+html how to click not to refresh and load" has been introduced. If you want to grasp the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.