用ajax+jQuery 实现页面加载更多(另类的分页)

使用jQuery、Ajax、ASP和MySQL实现动态加载更多内容 本文还有配套的精品资源,点击获取 简介:“加载更多”功能改善网页用户体验,适用于大量数据场景。本文将探讨如何通过结合jQuery监听滚动事件、使用Ajax技术与服务器交互、ASP后端处理请求、以及MySQL数据库查询,实现无需刷新页面即可动态加载内容的完整步骤。 1. 页面滚动事件监听与处理 在当今的网络应用中,页面滚动事件是一种常见的用户交互方式,它直接影... 阅读详情

这个其实和分页是起到一样的效果,只不过有时候在个别场景 个人感觉会比分页更加灵性一些,万年不变的分页看着也是很无聊的。我主要是想把这个功能记录下,分享给那些初学者。纯属原创,如有不足之处,随时指教。 先上图


这个 是我现在做的一个项目,订单管理页  本来是做分页的 但是想想 用这个其实也是可以的 然后就自己写了个 第一次写博客,排版什么的有点丑 请见谅~~O(∩_∩)O哈哈~

  • 页面 是jsp,没有用任何框架 纯jquery 大致的思路:1.既然是分页,就得记录每次请求后台获取数据的pageNo和pageSize,so 我的做法是把pageNo放进隐藏域中,每次请求过后都自动更新下隐藏域中的pageNo值,然后因为是做成点击“显示更多数据”,因此 用户也不像分页那样可以选择每页显示多少条数据,so  pageSize我是直接写死的 每次5条;2.利用ajax请求后台获取到数据之后,再把数据用jquery手动拼接到当前的页面最后一个标签后面,var _this = $(".pageUl li:last"); 这个是查找最后一个li标签。然后还有一个最重要的一点是 记得重置隐藏域中的pageNo的值,把当前的pageNo设置进去 每次请求就pageNo++。 下面是具体代码



如有错误 请随时指正~

jQuery实现瀑布流加载与AJAX分页实战 一个典型的 JSON 数据结构如下所示:"data": ["id": 1,"title": "文章标题1","author": "张三",},"id": 2,"title": "文章标题2","author": "李四",字段说明:status: 表示请求结果状态,通常为success或error。data: 实际返回的数据,这里是一个包含文章对象的数组。每个文章对象包含idtitleauthor和thumbnail等字段。 阅读详情

相关推荐

使用JQuery实现移动端上拉加载更多功能

本文还有配套的精品资源,点击获取 简介:为提升移动设备用户体验,介绍如何使用JQuery轻量级JavaScript库实现上拉滚动自动加载更多内容的功能。详细阐述了监听滚动事件、判断滚动是否到达底部的逻辑,并通过AJAX请求从服务器获取新数据,最后将其插入DOM。同时,强调了在快速滚动时防止过度加载、使用延时加载以及实现无限滚动等优化措施的重要性。 1. 上拉滚动加...

weixin_42146230的博客 1575

jquery中ajax的分页,利用jQuery中的ajax分页实现代码

本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp本人封装后,使用者需要在页面中引入page_ajax.jsp,并且在查询列表的时候,点击按钮,调用自定义的方法,如myFunction(),在这个方法里头,调用自己拓展的jquer方法,$.page...

weixin_42396502的博客 859

jquery实现数据动态加载分页的完整版

jquery实现数据动态加载分页的完整版,不错哦,欢迎下载

AjAX+Jquery实现滚动条下拉分页

两者都是在某一个元素的内部添加内容。 区别在于:append是在原有基础上增加,html中是替换当前所有内容 <script> <!-- 实现滚动条滚动start --> var pageNum = 1; // 当前页码 var pageSize =10; // 当前每页条数 var pageCount=0;//总页数 var winH = $('#div1').height();//页面可视区域高度 var p=0, t=0; // 顶部和底部的

lyylxx的博客 1720

我每天如何使用 ChatGPT

我偶尔会用这个功能作为开始。我本人非常喜欢阅读,让 ChatGPT 来概括所有文章,感觉就像身处于但丁描述的地狱的某个层次那样痛苦。然而,有时一些文章实在是太啰嗦、无聊,或者写得让人不愉快(比如一个无趣记者对一个让人讨厌的人进行的漫无焦点的采访)。我需要获取这些文章中的一些信息,以便保持信息的更新和了解。在晚期资本主义的广告经济下,很多文章只在一个段落里提供新信息,其余都是无聊的填充内容,只是为了展示糟糕的广告,这实在是对人们的时间和生命的一种浪费。我有几次利用 ChatGPT 来。

KevinDai007的博客 3783

Kali使用Metasploit内、外网渗透windows系统

Metasploit是一个免费的、可下载的框架,通过它可以很容易地获取、开发并对计算机软件漏洞实施攻击。它本身附带数百个已知软件漏洞的专业级漏洞攻击工具。当H.D. Moore在2003年发布Metasploit时,计算机安全状况也被永久性地改变了。 一、(内网渗透)内网英文缩写WAN;内网又称局域网 局域网的覆盖范围一般是方圆几千米之内,其具备的安装便捷、成本节约、扩展方便等特点使其在各类办公室内运用广泛。局域网可以实现文件管理、应用软件共享、打印机共享等功能,在使用过程当中,通过维护局域网网...

QQ670663的博客 2万+

jQuery实现的分页功能,包括ajax请求,后台数据

一:需求分析   1)需要首页,末页功能   2)有点击查看上一页,下一页功能   3)页码到当前可视页码最后一页刷新页面 二:功能实现思路   也是分为三部分处理   1)点击首页,末页直接显示第一页或者最后一页内容,当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图   首页状态 和 末页状态代码执行结果截图   

wild_cowboy的博客 5782

深入解析UDS 0x19服务:DTC状态掩码与故障诊断实战

本文深入解析了UDS诊断协议中的核心0x19服务(ReadDTCInformation),重点拆解了DTC状态掩码(DTCStatusMask)的八个状态位及其在故障生命周期中的联动逻辑。通过实战案例,详细说明了从故障发生、确认到清除的全过程,并介绍了如何利用该服务进行深度诊断,包括读取扩展数据(如冻结帧)和避免常见开发误区,是理解汽车ECU故障管理机制的关键。

weixin_29248313的博客 323

jQuery自动加载更多程序,小白也能看明白

javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。

2301_78850344的博客 673

用STM32F103C8T6和TB6612驱动模块,从零搭建一辆能避障循迹的智能小车(附完整代码)

本文详细介绍了如何使用STM32F103C8T6和TB6612驱动模块从零搭建一辆能避障循迹的智能小车。内容涵盖硬件选型、电路设计、底层驱动配置以及智能行为算法实现,并附有完整代码示例,帮助开发者快速掌握嵌入式开发的核心技术。

weixin_42641741的博客 444

【硬件工程师面经整理2_电源篇】

硬件工程师面经整理_电源篇

LeeYLong的博客 2766

纯手工打造 jquery + ajax 异步分页

摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等。 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长。

小码哥 1318

10万张数据集持续迭代:YOLO模型的场景专属自进化体系如何搭建?

做工业质检的朋友应该都有过这样的经历——拿着在COCO上刷榜的YOLO模型跑到产线上一测,精度直接腰斩。这不是模型不行,是场景不对口。过去一年,我深度参与了一个工业视觉项目:产线每天产生超过10万张图像,需要持续迭代检测模型。我们踩过无数坑,最终摸索出一套YOLO模型的场景专属自进化体系。今天不聊虚的,直接上干货。让模型在真实场景数据中持续学习、自动进化,而不是每次依赖人工标注从头训练。下面我从主动学习筛选、增量持续学习、架构选型、部署优化、安全防护五个维度,拆解整个搭建过程。声明。

2601_95807009的博客 106

Jquery+php+mysql实现上拉加载更多,后端CI,超详细,有示例(其实就是ajax无刷新分页)

来吧,今天不玩虚拟机了,改代码了,今天在公司做了个小东西挺有意思,上拉加载更多,用ajax实现的,不复杂,关键的一两个点想明白了就通了。不多说了,先上代码: 前端代码: /* *** @author By Shiva *** Created *//*需要jquery支持哦*/ //Let's Go $(function(){ /*起始页数,每页显示数据已经在

Shiva的博客 4140

YOLOv11改进 - C3k2融合 | C3k2融合细节增强卷积DEConv(Detail-Enhanced Convolution)提升细微特征提取能力

本文介绍了细节增强卷积(DEConv)技术在YOLOv11中的结合应用。DEConv由标准卷积层和多种差异卷积层并行组成,通过计算像素差异和卷积操作增强特征提取能力,还采用重参数化技术简化模型结构。其优势在于能更好捕捉高频信息、保持参数数量不变且降低推理计算成本。我们将DEConv集成进YOLOv11,替换部分模块。

魔改工程师的博客 862

【图像检测】基于MATLAB的火灾监测系统设计

1 简介 针对传统火灾监测系统对于大空间的室内场合和开阔的室外环境易失效的问题,提出了一种结合火灾火焰特征和烟雾特征来进行判断的数字图像型火灾监测算法.火焰颜色特征是基于RGB颜色模型中的R,G,B三基色分量和它们之间的关系来判断是否有火焰发生,烟雾模型特征是图像灰度化预处理后,基于HIS空间模型提取的,通过计算像素点与基准像素点之间距离D的大小来判断是否有火灾发生.对提出的算法进行MATLAB仿真,并和传统的基于五种算子的边缘检测算法提取火焰烟雾特征进行对比.实验结果表明,提出的火焰特征和烟雾特征提取算

qq_59747472的博客 2797

jquery实现ajax无刷新分页页码控件

这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是

忆浅曦 8967

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

jq实现点击加载更多分页功能

页面上实现类似于下拉加载更多的功能,这种是点击加载更多 。 大致思路是: 首先Ajax获取到下一页内容,返回json格式数据,如果是跨域请求可以用jsonp返回,通过jq的append()到某个元素后面 此时分页的page+1,可以在“加载更多”按钮上把总页数和当前页用自定义属性标识,如data-page=1,data-total=5 如果当前页等于总页数时将”加载更多”按钮remov...

T_Struggle的博客 3979

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

jQuery实现简单实用的H5(手机端)下拉分页加载(所谓的懒加载!!!)

话不多说,直接码上。 <div> <div>展示内容列表块</div> //now当前页数 num总页数 这些需要在列表初始化的时候计算好,并赋值给此属性 <div class="caseud" now="1" num="2"> ...

独而不孤 3901

jquery 实现点击加载更多

这是明智之举吗?

Jadenzy的专栏 9162

ajax实现无刷新分页功能

原理:前台换用ajax将页码以post的方式传到后台,后台接收页码,后台的操作与用php实现分页功能大致一样,只是还需将总页数传到前台,以便在前台输出分页链接。 那么前台怎样传页码呢???只需用ajax的回调函数,接收后台的数据,利用json,动态添加dom节点,利用for循环输出分页链接,并在链接a里增加一个data属性,属性值为 页码。当点击a时,利用js获取属性值,这样,即可实现js前台

倾城一笑stu 1万+

Wordpress无限Ajax分页加载更多文章

今天在Github上找东西的时候发现了一个叫做Infinite AJAX Scroll 的项目,看到它通过很简单的设置,就可以让Wordpress支持分页Ajax无线加载功能。测试了下非常好用,现在分享给大家~ 下面以Wordpress自带主题Twenty Twelve主题为例: 第1步: 把jquery-ias.min.js拷贝到wp-content/theme...

diange6174的博客 1363

Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

滚动到页面顶部加载 .mainDiv { width: 800px; border: solid 1px #f00; padding: 10px; } .item {

深南大道 3万+

html分页请求代码,WordPress分页加载更多ajax

不适用分页,转而采用在文章列表下方插入下一页列表的方式进行加载,这是ajax分页的另一种形式。下面是实现方法html结构▼ 正在加载 ...js代码这已经是冒泡绑定,所以全站ajax时不需要放入回调重载内$(document).on('click','#pagination a:not(.noajx)',function(){var _this = $(this);var next = _thi...

weixin_35986494的博客 255

php中加载更多,【jquery ,ajax,php】加载更多实例

jquery$(function() {//初始化getData(0);var index = 1;$("#more").click(function() {getData(index)index = index + 1;})var cur_page = 1;var total, total_page, page_size;//ajax交互function getData(pageIndex) {...

weixin_34474759的博客 317

thinkphp+ajax+jquery异步实现加载更多

1.后台请求的方法(这里主要赋模板,再查出总页数) //菜园列表     public function flist(){         $t = D('FarmListView');         $data = $t->field(true)->order('id desc')->select();         $pagesize = $this->pagesize;

u012891324的专栏 4436
下一篇: ssm+拦截器做到利用token令牌机制防止数据重复提交
Ice166
博客等级 码龄9年 151粉丝 22原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值