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

Today, I would like to share with you how to use jQuery+PHP+ajax to achieve Weibo load more content list function of the relevant knowledge points, detailed contents, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

The basic principle of Ajax loading: 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 "see 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 responds, obtains the corresponding records of the database and returns to the foreground page in the form of JSON. The foreground page jQuery parses the JSON data and appends the data to the list page. In fact, it is the Ajax paging effect.

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 should be pointed out 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.

The CSS style is as 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 the actual project. Note that more_loader_spinner is defined to load animated images.

The jQuery section is as follows:

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

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

PHP section:

Data.php file:

Link the 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);} 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 class attribute' trigger': '.get_more', / / trigger the class attribute' scroll': 'false' that loads more records / / whether scrolling trigger loading is supported or not. / / the offset of scrolling trigger loading is all the contents of the article "how to use jQuery+PHP+ajax to load more content lists on Weibo". 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.