微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Ajax动态滚动加载数据第一版

分类：Ajax作者：编程之家

看新浪微博，人人网都有这样的效果：滚动条滚动到最下面的时候，新的数据就被自动加载出来了，今天亲自尝试了一下这个效果的实现。

核心代码更新：

[javascript] view plain copy
  1. $(window).scroll(function(){
  2. //当滚动到最底部以上n像素时，加载新内容
  3. if($(document).height()-$(this).scrollTop()-$(this).height()<1){
  4. getData(gCurrentPage,gLongitude,gLatitude);
  5. }
  6. });



首先，准备一个分页的存储过程：

[sql] copy
    CREATEPROCEDUREproctest
  1. @pagesizeINT,
  2. @pagenumberINT
  3. AS
  5. SELECT*
  6. FROM(SELECTROW_NUMBER()OVER(ORDERBYuserid)ASROWNUM,c_name,user_emailFROMehrusersWHEREc_name<>''
  7. )ASproducts
  8. WHEREROWNUMBETWEEN@pagesize*(@pagenumber-1)+1and@pagesize*@pagenumber
  10. EXECdbo.proctest20,1

接着，写一个取数据的C#方法：

[csharp] copy
    //Test
  1. publicstaticDataTableGetTable(intpagesize,intpagenum)
  2. {
  3. stringsql=string.Format(@"EXECdbo.proctest{0},{1}",pagesize,pagenum);
  4. DataSetds=sqlHelper.ExecuteDataset(ConnString.GetConString,CommandType.Text,sql);
  5. if(ds.Tables.Count>0&&ds.Tables[0].Rows.Count>0)
  6. returnds.Tables[0];
  7. else
  8. returnnull;
  9. }

Ajax请求数据的逻辑，调用刚才的方法，返回JSON：

copy

    protectedvoidPage_Load(objectsender,EventArgse)
  1. {
  2. if(Request.QueryString["pagesize"]!=null&&Request.QueryString["pagenumber"]!=null)
  3. intpagesize=int.Parse(Request.QueryString["pagesize"].ToString());
  4. intpagenumber=int.Parse(Request.QueryString["pagenumber"].ToString());
  5. System.Data.DataTabledt=DB.GetTable(pagesize,pagenumber);
  6. stringjson=Tools.CreateJsonParameters(dt);
  7. Response.Write(json);
  8. }
  9. 其中用到了一个aspx页面作为controller。

    接下来，就是比较重要的页面和js代码了：

    页面：

    [html] copy
    <!DOCTYPEhtml>
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. headMetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  3. title>滚动测试</style .mainDiv{
  4. width:800px;
  5. border:solid1px#f00;
  6. padding:10px;
  7. .item{
  8. width:600px;
  9. height:50px;
  10. border:solid1px#00ff90;
  11. font-size:12px;
  12. margin:10px;
  13. .title{
  14. font-size:16px;
  15. line-height:20px;
  16. .content{
  17. line-height:14px;
  18. scriptsrc="Scripts/jquery-1.7.1.js">scriptbodyh1divclass="mainDiv" <!--divclass="item"divclass="title">titledivdivclass="content">contentcontentcontentcontentcontentcontentcontent --html>

JS：

copy

    <scripttype="text/javascript">
  1. vargPageSize=10;
  2. vari=1;//设置当前页数，全局变量
  3. $(function(){
  4. //根据页数读取数据
  5. functiongetData(pagenumber){
  6. i++;//页码自动增加，保证下次调用时为新的一页。
  7. $.get("Ajax.aspx",{pagesize:gPageSize,pagenumber:pagenumber},153); font-weight:bold; background-color:inherit">function(data){
  8. if(data.length>0){
  9. varjsonObj=JSON.parse(data);
  10. insertDiv(jsonObj.Head);
  11. });
  12. //初始化加载第一页数据
  13. getData(1);
  14. //生成数据html，append到div中
  15. functioninsertDiv(json){
  16. var$mainDiv=$(".mainDiv");
  17. varhtml='';
  18. for(vari=0;i<json.length;i++){
  19. html+='<divclass="item">';
  20. html+='<divclass="title">'+json[i].ROWNUM+''+json[i].c_name+'</div>';
  21. html+='<divclass="content">'+json[i].user_email+'</div>';
  22. html+='</div>';
  23. $mainDiv.append(html);
  24. //==============核心代码=============
  25. varwinH=$(window).height();//页面可视区域高度
  26. //定义鼠标滚动事件
  27. $(window).scroll(varpageH=$(document.body).height();
  28. varscrollT=$(window).scrollTop();//滚动条top
  29. varaa=(pageH-winH-scrollT)/winH;
  30. if(aa<0.02){//0.02是个参数
  31. getData(i);
  32. //==============核心代码=============
  33. </script>

最终效果：

滚动前：

滚动自动刷新：

后来又对这一版本进行了一些改进，详见：

http://www.cnblogs.com/dannywang/p/3337473.html

原文地址：https://www.jb51.cc/ajax/163470.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot