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

Ajax 2020-06-06

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

核心代码更新：

[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

    相关文章

    ajax 上传文件项目下载
    IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但...
    ajax .post()
    PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
    ajax 不返回值 写法
    使用 AJAX（Asynchronous JavaScript and XML）技术可以在不...
    ajax 下载文件 blob
    Ajax（Asynchronous JavaScript and XML）是一种用于改进网页...
    ajax 下载excel文件流
    本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以...
    ajax .get .post
    Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...