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 ...
随机推荐
- 大数据之hadoop小文件存档
hadoop小文件存档1.HDFS存档小文件弊端 每个文件均按块存储,每个块的元数据存储在NameNode的内存中,因此HDFS存储小文件会非常低效.因为大量的小文件会耗尽NameNode中的大部分内 ...
- JavaConfig
Java Config是Spring的一个子项目,它旨在通过Java类的方式提供Bean的定义信息,是Spring4.0的核心功能 普通的POJO只要标注@Configuration注解,就可以为 ...
- "一个实用的却被忽略的命名空间:Microsoft.VisualBasic":
当你看到这个命名空间的时候,别因为是vb的东西就匆忙关掉网页,那将会是您的损失,此命名空间中的资源最初目的是为了简化vb.net开发而创建的,所以microsoft.visualbasic并不 ...
- .net core, docker 在vs2019开发过程中的问题以及解决办法
.net core, docker 在vs2019开发过程中的问题以及解决办法 记录下来,帮助Ta人~ 1.vs调试,快Build完后提示Docker 端口:xxxx,xxxx,xxxx占用 解决办法 ...
- (15)python打包
.py文件在没有安装python软件的电脑上是不能被执行的
- PAT甲级——A1138 Postorder Traversa【25】
Suppose that all the keys in a binary tree are distinct positive integers. Given the preorder and in ...
- springboot配置文件application.properties更新记录(自学使用)
#应用名称spring.application.name=demo #应用根目录server.context-path=/demo #应用端口server.port=8084 #错误页,指定发生错误时 ...
- C# 字符串string和内存流MemoryStream及比特数组byte[]之间相互转换
定义string变量为str,内存流变量为ms,比特数组为bt 1.字符串转比特数组 复制代码 代码如下: (1)byte[] bt=System.Text.Encoding.Default.GetB ...
- T2980 LR棋盘【Dp+空间/时间优化】
Online Judge:未知 Label:Dp+滚动+前缀和优化 题目描述 有一个长度为1*n的棋盘,有一些棋子在上面,标记为L和R. 每次操作可以把标记为L的棋子,向左移动一格,把标记为R的棋子, ...
- watchbog再升级,企业黄金修补期不断缩小,或面临蠕虫和恶意攻击
概要 近日,阿里云安全团队发现wacthbo挖矿团伙[1]新增了CVE_2019_5475 的漏洞利用代码,并开始进行尝试性攻击.通过对CVE_2019_5475漏洞的生命周期进行分析后发现,漏洞批量 ...