php ajax jquery implements click to load more content_jquery
We can encounter such an application on some Weibo websites. The Weibo content list does not use paging bars. Instead, a certain number of records are loaded at one time and displayed on the list page. When the user browses to the bottom of the list page, he can Click "View More" to load more records. In this article, I will tell you how to implement this application using jQuery and PHP.
Basic principle: When the page is loaded, jQuery requests data from the background, and PHP displays the latest records on the list page by querying the database. There is a "more" link at the bottom of the list page. By triggering the link, Send an Ajax request to the server. The background PHP program gets the request parameters and responds. It obtains the corresponding records from the database and returns them to the front-end page in the form of JSON. The front-end page jQuery parses the JSON data and appends the data to the list page. In fact, it is the Ajax paging effect.
First of all, we need to introduce the jquery library and jquery.more.js plug-in. jquery.more.js has already encapsulated many functions and provided the function of parameter configuration.
<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> <div class="content"></div> </div> <a href="javascript:;" class="get_more">::点击加载更多内容::</a> </div>
It is worth mentioning that the styles single_item and get_more are related to the jquery.more.js plug-in. You can also choose another class name, but you must 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 actual projects. Note that more_loader_spinner defines loading animated images.
jQuery
$(function(){ $('#more').more({'address': 'data.php'}) });
It is very simple to use. Configure the backend address: data.php to see how data.php processes data.
PHP
data.php links to the database. This example uses the same data table as the article on this site.
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.php receives two parameters submitted by the front page. $_POST['last'] is the number of records to start, and $_POST['amount'] is the number of records displayed at a time. You can understand it by looking at the SQL statement. In fact, it is Statements 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', //The number of records displayed each time
'address' : 'comments.php', //Request the address of the background
'format' : 'json', //Data transmission format
'template' : '.single_item', //html records the class attribute of DIV
'trigger' : '.get_more', //Class attribute that triggers loading of more records
'scroll' : 'false', //Whether scrolling trigger loading is supported
'offset' : '100', //Offset when scrolling triggers loading
The above is the entire content of this article, I hope you all like it.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati

If you are an experienced PHP developer, you might have the feeling that you’ve been there and done that already.You have developed a significant number of applications, debugged millions of lines of code, and tweaked a bunch of scripts to achieve op

Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems. With a large collection of extensions for many programming languages, VS Code can be c

JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,

A string is a sequence of characters, including letters, numbers, and symbols. This tutorial will learn how to calculate the number of vowels in a given string in PHP using different methods. The vowels in English are a, e, i, o, u, and they can be uppercase or lowercase. What is a vowel? Vowels are alphabetic characters that represent a specific pronunciation. There are five vowels in English, including uppercase and lowercase: a, e, i, o, u Example 1 Input: String = "Tutorialspoint" Output: 6 explain The vowels in the string "Tutorialspoint" are u, o, i, a, o, i. There are 6 yuan in total

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

Static binding (static::) implements late static binding (LSB) in PHP, allowing calling classes to be referenced in static contexts rather than defining classes. 1) The parsing process is performed at runtime, 2) Look up the call class in the inheritance relationship, 3) It may bring performance overhead.

What are the magic methods of PHP? PHP's magic methods include: 1.\_\_construct, used to initialize objects; 2.\_\_destruct, used to clean up resources; 3.\_\_call, handle non-existent method calls; 4.\_\_get, implement dynamic attribute access; 5.\_\_set, implement dynamic attribute settings. These methods are automatically called in certain situations, improving code flexibility and efficiency.
