PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数据,并将数据追加到列表页。其实也是Ajax分页效果。

html代码:
<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>
引入jQuery插件和jquery.more.js加载更多插件:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.more.js"></script>
$(function(){
$('#more').more({'address': 'data.php'})
});
data.php接收前台页面提交过来的两个参数,$_POST['last']即开始记录数,$_POST['amount']即单次显示记录数,看SQL语句就明白,其实就是分页中用到的语句。
require_once('connect.php');
$last = $_POST['last'];
$amount = $_POST['amount'];
$query = mysql_query("select * from article order by id desc limit $last,$amount");
while ($row = mysql_fetch_array($query)) {
$sayList[] = array(
'title' => "<a href='http://www.xxx.com/".$row['id'].".html' target='_blank'>".$row['title']."</a>",
'author' => $row['id'],
'date' => date('m-d H:i', $row['addtime'])
);
}
echo json_encode($sayList);
本文转自:https://www.sucaihuo.com/php/380.html 转载请注明出处!
PHP+Ajax点击加载更多列表数据实例的更多相关文章
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- PHP+Ajax点击加载更多内容
css样式: <style type="text/css"> #more{margin:10px auto;width: 560px; border: 1px soli ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- Jquery点击加载更多
一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- js点击加载更多可以增加几条数据的显示
<div class="list"> <div class="one"> <div class="img" ...
- Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多 下拉加载更多
一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...
- tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多
随机推荐
- Python实战——基于股票的金融数据量化分析
说明:本文只是通过自己的已学知识对股票数据进行了一个简单的量化分析,只考虑了收盘情况,真实的量化交易中仅仅考虑收盘情况是不够的,还有很多的复杂因素,而且仅仅三年数据是不足以来指导真实的股票交易的,因此 ...
- Java - 包装类 常量池
概述: 在Java中存在一些基本数据类型,这些基本数据类型变量,不能像其他对象一样调用方法,属性.... 一些情况下带来一些问题,包装类就是为了解决这个问题而出现 包装类可以使得这些基础数据类型,拥有 ...
- 测试环境部署之填坑记录-Expected one result (or null) to be returned by selectOne(), but found: 2
最近在部署性能测试环境的时候,环境 部署好以后,部分功能出现接口查询异常,问题现象: 拿到错误,肯定要先判断是前端还是后端代码的问题,最简单的方式是抓包查看: 以上是报错页面捕获的接口报错,很明显的接 ...
- 使用NodeJS模块-第三方提供的模块(什么是npm)
第三方开发者提供的模块 第三方模块是由NodeJS社区或第三方个人开发的功能模块,这些功能模块以软件包的形式存在.被发布在npmjs注册表中.npmjs是一个注册中心,所有软件包的信息都会被记录到该注 ...
- vue v-if和v-show的区别
其中v-if依赖于控制DOM节点,而v-show是依赖于控制DOM节点的display属性. 当v-show传入的值为true时,对应DOM元素的display的值为block之类的,反之为false ...
- Thymeleaf常用语法:HTML属性设置
使用Thymeleaf的属性来设置HTML属性.(1)使用th:attr属性可以修改原来HTML节点的属性:(2)th:attr属性可以同时设置多个属性:(3)每一个HTML属性都有对应的Thymel ...
- nginx——keepalived
nginx--keepalived 1.keepalived高可用基本概述 什么是高可用 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用 ...
- TypeScript 学习笔记(四)
函数: 1.函数是一组一起执行一个任务的语句 2.我们可以把一段可复用的代码放到一起组成函数,从而提高效率 3.函数声明(通过关键字 function 来声明)告诉编译器函数的名称.返回类型和参数 4 ...
- CodeForces - 1230D(思维+位运算)
题意 https://vjudge.net/problem/CodeForces-1230D 要组建一个小组,要求小组中每个人都不比所有人强,当一个人懂得一个算法但是另一个不懂那么前者认为他比后者强. ...
- docker搭建kafka环境&&Golang生产和消费
docker 搭建kafka环境 version: '2' services: zk1: image: confluentinc/cp-zookeeper:latest hostname: zk1 c ...