PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数据,并将数据追加到列表页。其实也是Ajax分页效果。
html代码:
1 <div id="more"> 2 <div class="single_item"> 3 <div class="element_head"> 4 <div class="date"></div> 5 <div class="author"></div> 6 </div> 7 <div class="content"></div> 8 </div> 9 <a href="javascript:;" class="get_more">::点击加载更多内容::</a> 10 </div>
引入jQuery插件和jquery.more.js加载更多插件:
1 <script type="text/javascript" src="jquery.js"></script> 2 <script type="text/javascript" src="jquery.more.js"></script> 3 $(function(){ 4 $('#more').more({'address': 'data.php'}) 5 });
data.php接收前台页面提交过来的两个参数,$_POST['last']即开始记录数,$_POST['amount']即单次显示记录数,看SQL语句就明白,其实就是分页中用到的语句。
1 require_once('connect.php'); 2 3 $last = $_POST['last']; 4 $amount = $_POST['amount']; 5 6 $query = mysql_query("select * from article order by id desc limit $last,$amount"); 7 while ($row = mysql_fetch_array($query)) { 8 $sayList[] = array( 9 'title' => "<a href='http://www.xxx.com/".$row['id'].".html' target='_blank'>".$row['title']."</a>", 10 'author' => $row['id'], 11 'date' => date('m-d H:i', $row['addtime']) 12 ); 13 } 14 echo json_encode($sayList);
本文转自:https://www.sucaihuo.com/php/380.html 转载请注明出处!
转载于:https://www.cnblogs.com/mrlime/p/11526369.html
PHP+Ajax点击加载更多列表数据实例相关推荐
- php ajax 上拉显示更多,PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
- 使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
<template><div class="sg-page-body"><div class="sg-list"><v ...
- 前端vue里面点击加载更多_js实现『加载更多』功能实例
DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
- 底部点击加载更多功能的简单实现
底部点击加载更多功能的简单实现 主要思路是:后台将数据按10个一页进行处理,前端请求的时候传递的分页参数就是页数.从主页选择一个类型去到列表页,会先从后端请求10条数据渲染到页面上.点击加载更多的 ...
- html加载更多实现代码,如何实现点击“加载更多”?
看你的样子用的应该是java写的后端(, ...).为了实现加载更多,其实就是点击按钮后在不刷新页面的情况下添加更多的内容显示到当前页面中.用ajax拉取数据,前提是后端能够根据条件(例如:页号.分类 ...
- 前端vue里面点击加载更多_vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
- mui用ajax上拉加载更多,mui上拉加载更多的使用
demo地址 mui框架中上拉加载的坑 1.在函数自己上拉加载行为后的回调函数 2.在mui封装的上拉加载中,点击某一项会失效. 解决方法 1.该函数是必须要写的,用来写自己的逻辑需求,但是一般情况下 ...
- php中手机端ajax上拉加载更多,jQuery手机网页上拉加载更多
手机网页和PC网页都可以使用的上拉加载更多内容,其中LoadingDataFn自己改为ajax加载就可以了var page = 1, //分页码 off_on = false, //分页开关(滚动加载 ...
- vux loadmore + axios 实现点击加载更多
在微信项目中有应用过几个上拉加载更多的组件,但总会出现一些兼容性方面的bug,需要各种补漏(注:组件都是基于iscroll实现的, iscroll原本就有些坑).Vux也有提供Scroller组件实现 ...
最新文章
- Codeforces Round #370 (Div. 2) A. Memory and Crow 水题
- 将vim打造成IDE编程环境
- QT绘制散点图(2)
- 详解python的super()的作用和原理
- SpringIOC配置文件「bean」标签的属性id class name scope init-method destroy-method factory-bean factory-method
- CF1540B Tree Array(期望,dp)
- AcWing之找出不改变数组找到重复的数字
- 二级计算机access押题,全国计算机等级考试标准教程:二级Access
- 高管访谈:AI 驱动的新兴金融市场改革,还有这三项障碍
- 未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral,解决
- linux运维故障报告,iis7报为应用程序池“xx”提供服务的进程在启动过程中尝试读取配置时报告故障(503错误)处理方法...
- 鸿蒙系统受谷歌影响吗,华为鸿蒙系统,会受到人们的欢迎吗?
- DevExtreme 移动跨平台开发 C#语言
- springcloud-gateway路由配置和跨域配置
- SQL:postgresql中为查询结果增加一个自增序列之ROW_NUMBER 	() OVER ()的使用
- [解决]RESTEASY003215: could not find writer for content-type text/html type: java.lang.String
- 如何批量压缩图片体积大小kb?
- Redis的配置文件详解
- 采集卡属于计算机设备还是采集设备,显卡能做视频采集卡吗?
- 鸿蒙系统共享电脑文件,鸿蒙Hi3516通过NFS挂载方式与Windows共享文件
热门文章
- PHP 获取服务器详细信息【转】
- Linux Crontab 任务管理工具命令以及示例
- SqlBulkCopy 批量复制数据到数据表
- 1837Balance
- 《离散数学》双语专业词汇表 名词术语中英文索引
- OpenDDS通讯中rtps_discovery对等发现的基本配置和说明
- ElasticSearch安装过程中遇到的一些问题
- [CareerCup] 4.7 Lowest Common Ancestor of a Binary Search Tree 二叉树的最小共同父节点
- tfs文件系统之NS配置管理
- 【Hibernate框架开发之九】Hibernate 性能优化笔记!(遍历、一级/二级/查询/缓存/乐观悲观锁等优化算法)...