PHP+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>
jQuery
$(function(){
$('#more').more({'address': 'data.php'})
});
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.sucaihuo.com/js/".$row['id'].".html' target='_blank'>".$row['title']."</a>",
'author' => $row['id'],
'date' => date('m-d H:i', $row['addtime'])
);
}
echo json_encode($sayList);
jquery.more.js相关API
参数 | 描述 | 默认值 |
amount | 每次显示记录数 | 10 |
address | 请求后台的地址 | - |
format | 数据传输格式 | json |
template | html记录DIV的class属性 .single_item | - |
trigger | 触发加载更多记录的class属性 .get_more | - |
scroll | 是否支持滚动触发加载 | false |
offset | 滚动触发加载时的偏移量 | 100 |
七,源码下载
链接: https://pan.baidu.com/s/1x5wRisLRxAIpuQUSkO0BOg
提取码: qya7
PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载的更多相关文章
- JS简单实现滚动自动加载新内容(懒加载)
加载源 // 这里存后台发来的数据 var galleryList = [ { src: "./images/1.jpeg", desc: "11111" }, ...
- 前端 | 页面触底自动加载 Vue 组件
不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...
- Composer概述及其自动加载探秘
composer概述 一开始,最吸引我的当属 Composer 了,因为之前从没用过 Composer . Composer 是PHP中用来管理依赖关系的工具,你只需在自己的项目中声明所依赖的外部工具 ...
- Yii2的深入学习--自动加载机制
Yii2 的自动加载分两部分,一部分是 Composer 的自动加载机制,另一部分是 Yii2 框架自身的自动加载机制. Composer自动加载 对于库的自动加载信息,Composer 生成了一个 ...
- Yii2的深入学习--自动加载机制(转)
Yii2 的自动加载分两部分,一部分是 Composer 的自动加载机制,另一部分是 Yii2 框架自身的自动加载机制. Composer自动加载 对于库的自动加载信息,Composer 生成了一个 ...
- composer 实现自动加载原理
简介 一般在框架中都会用到composer工具,用它来管理依赖.其中composer有类的自动加载机制,可以加载composer下载的库中的所有的类文件.那么composer的自动加载机制是怎么实现的 ...
- final关键字,类的自动加载,命名空间
final关键字 1.final可以修饰方法和类,但是不能修饰属性: 2.Final修饰的类不能被继承: 3.Fina修饰的方法不能被重写,子类可以对已被final修饰的父类进行访问,但是不能对父类的 ...
- 29)PHP,自动加载类
(1)作用: 类的自动加载是指,在外面的页面中,并不需要去“引入”(包含)类文件,但是程序会在需要一个类的时候就自动去“动态加载”该类. (2)什么叫做“需要一个类”?通常是这样的情况: 1,创建一个 ...
- Yaf框架下类的自动加载
前面两篇博客分别讲述了PHP自带的类加载和composer中类的自动加载,其实Yaf框架也实现了基于PSR0和PSR4的类的自动加载.根据我对Yaf下类的自动加载方式的理解写下这篇博客.由于接触Yaf ...
随机推荐
- spring boot项目开发中遇到问题,持续更新
1.JPA中EntityManager不能执行建表语句,提示要加事务Error:javax.persistence.TransactionRequiredException: Executing an ...
- window 下kafka 配置测试
1.准备工作 1.1 java环境 1.2 下载并解压到D:\zookeeper-3.4.13 下载并解压到 D:\kafka_2.12-2.1.0 2.安装zookeeper .kafka 我安装 ...
- 02-Nov-2017 07:11:56.475 信息 [http-nio-8080-exec-10] com.mchange.v2.c3p0.impl.AbstractPoolBackedDataSource. Initializing c3p0 pool...
报错: 02-Nov-2017 07:11:56.475 信息 [http-nio-8080-exec-10] com.mchange.v2.c3p0.impl.AbstractPoolBackedD ...
- Http学习(二)
使用首部字段是为了给浏览器和服务器提供报文主体大小.所使用语言.认证信息等 4种首部字段类型 通用首部字段 请求首部字段 响应首部字段 实体首部字段 详细说明: HTTP首部字段类型 通用首部字段: ...
- 云-腾讯云-笔记:pom.xml 配置
ylbtech-云-腾讯云-笔记:pom.xml 配置 1. pom.xml返回顶部 1.1 com.qcloud / 腾讯云 <!-- https://mvnrepository.com/ar ...
- USACO 2009 Open Grazing2 /// DP+滚动数组oj26223
题目大意: 输入n,s:n头牛 s个栅栏 输入n头牛的初始位置 改变他们的位置,满足 1.第一头与最后一头的距离尽量大 2.相邻两头牛之间的距离尽量满足 d=(s-1)/(n-1),偏差不超过1 3. ...
- [JZOJ4759] 【雅礼联考GDOI2017模拟9.4】石子游戏
题目 描述 题目大意 在一棵树上,每个节点都有些石子. 每次将mmm颗石子往上移,移到根节点就不能移了. 双方轮流操作,问先手声还是后手胜. 有三种操作: 1. 询问以某个节点为根的答案. 2. 改变 ...
- 拦截器和自定义注解@interface
1 .拦截器(Interceptor): 用于在某个方法被访问之前进行拦截,然后在Handler执行之前或之后加入某些操作,其实就是AOP的一种实现策略. 拦截用户的请求并进行相应的处理,比如:判断用 ...
- Django项目在linux上运行
目录 前言 上传 解压 制作启动脚本 这是一篇关于如何在linux下,以后台进程的方式运行服务,命令改改基本上就通用了. 前言 我们在windows本地开发完Django项目后,需要把项目部署到lin ...
- duilib教程之duilib入门简明教程4.响应按钮事件
上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI; 也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介绍下,CC ...