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

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. });
    7. @H_502_66@



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

[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
    11. @H_502_66@

接着，写一个取数据的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. }
    10. @H_502_66@

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>
    19. @H_502_66@
    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>
      34. @H_502_66@
      最终效果：

      滚动前：

      滚动自动刷新：

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

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

      猜你在找的Ajax相关文章

      网页的异步请求（Ajax）
      JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
      手动实现AJAX
      AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
      axios异步提交表单数据的不同形式
      踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
      php的ajax简单实例
      很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
      Json与Ajax(注册实例）
      需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
      jSon和Ajax登录功能，ajax数据交互案例
      ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
      关于AjaxControlToolkit的样式问题
      网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
      一个简单的AJAX实现(HELLO AJAX)
      客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
      AJAX中文乱码的两类问题及解决之策
      1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
      实例：AJAX返回xml代码如何在网页中显示
      建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
      HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
      关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作