铁雪资源网 Design By www.gsvan.com
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考,具体如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>滚动到页面顶部加载</title> <script src="/UploadFiles/2021-04-02/jquery-1.11.1.min.js">/*endlesspage.js*/ var gPageSize = 10; var i = 1; //设置当前页数,全局变量 $(function () { //根据页数读取数据 function getData(pagenumber) { i++; //页码自动增加,保证下次调用时为新的一页。 $.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) { if (data.length > 0) { var jsonObj = JSON.parse(data); insertDiv(jsonObj); } }); $.ajax({ type: "post", url: "/ajax/Handler.ashx", data: { pagesize: gPageSize, pagenumber: pagenumber }, dataType: "json", success: function (data) { $(".loaddiv").hide(); if (data.length > 0) { var jsonObj = JSON.parse(data); insertDiv(jsonObj); } }, beforeSend: function () { $(".loaddiv").show(); }, error: function () { $(".loaddiv").hide(); } }); } //初始化加载第一页数据 getData(1); //生成数据html,append到div中 function insertDiv(json) { var $mainDiv = $(".mainDiv"); var html = ''; for (var i = 0; i < json.length; i++) { html += '<div class="item">'; html += ' <div class="title">' + json[i].rowId + ' ' + json[i].D_Name + '</div>'; html += ' <div class="content">' + json[i].D_Name + ' ' + json[i].D_Password + '</div>'; html += '</div>'; } $mainDiv.append(html); } //==============核心代码============= var winH = $(window).height(); //页面可视区域高度 var scrollHandler = function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH - winH - scrollT) / winH; if (aa < 0.02) {//0.02是个参数 if (i % 10 === 0) {//每10页做一次停顿! getData(i); $(window).unbind('scroll'); $("#btn_Page").show(); } else { getData(i); $("#btn_Page").hide(); } } } //定义鼠标滚动事件 $(window).scroll(scrollHandler); //==============核心代码============= //继续加载按钮事件 $("#btn_Page").click(function () { getData(i); $(window).scroll(scrollHandler); }); });<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; using MSCL; using Newtonsoft.Json; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { //核心处理程序 string pageSize = context.Request["pagesize"]; string pageIndex = context.Request["pagenumber"]; if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex)) { context.Response.Write(""); } else { //请结合实际自行取分页数据,可调用分页存储过程 MSCL.PageHelper p = new PageHelper(); p.CurrentPageIndex = Convert.ToInt32(pageIndex); p.FieldsName = "*"; p.KeyField = "d_id"; p.SortName = "d_id asc"; p.TableName = "testtable"; p.EndCondition = "count(*)"; p.PageSize = Convert.ToInt32(pageSize); DataTable dt = p.QueryPagination(); string json = JsonConvert.SerializeObject(dt, Formatting.Indented); context.Response.Write(json); } } public bool IsReusable { get { return false; } } }[ { "rowId": 1, "D_Id": 1, "D_Name": "名称1", "D_Password": "密码测试1", "D_Else": "其他1" }, { "rowId": 2, "D_Id": 2, "D_Name": "名称2", "D_Password": "密码测试2", "D_Else": "其他2" }, { "rowId": 3, "D_Id": 3, "D_Name": "名称3", "D_Password": "密码测试3", "D_Else": "其他3" }, { "rowId": 4, "D_Id": 4, "D_Name": "名称4", "D_Password": "密码测试4", "D_Else": "其他4" }, { "rowId": 5, "D_Id": 5, "D_Name": "名称5", "D_Password": "密码测试5", "D_Else": "其他5" }, { "rowId": 6, "D_Id": 6, "D_Name": "名称6", "D_Password": "密码测试6", "D_Else": "其他6" }, { "rowId": 7, "D_Id": 7, "D_Name": "名称7", "D_Password": "密码测试7", "D_Else": "其他7" }, { "rowId": 8, "D_Id": 8, "D_Name": "名称8", "D_Password": "密码测试8", "D_Else": "其他8" }, { "rowId": 9, "D_Id": 9, "D_Name": "名称9", "D_Password": "密码测试9", "D_Else": "其他9" }, { "rowId": 10, "D_Id": 10, "D_Name": "名称10", "D_Password": "密码测试10", "D_Else": "其他10" } ]PS:这里还涉及json格式数据的交互操作,关于json数据操作小编推荐几个本站的在线工具供大家参考,相信在以后的开发中可以派上用场:
在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljsonjson代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformatC语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)的评论...