您现在的位置： 万盛学电脑网 >> 程序编程 >> 网络编程 >> asp.net编程 >> 正文
浏览器窗口滚动加载数据采用异步形式从后台加载数据
作者：佚名 责任编辑：admin 更新时间：2022-06-22
在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据，下面是具体的实现，希望对大家有所帮助
以下滚动效果为在网上查找。 在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplication1.ScrollLoadData" %> <!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 runat="server"> <title>滚动加载数据库数据</title> <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = 50; //距下边界长度/单位px var elemt = 500; //插入元素高度/单位px var maxnum = 20; //设置加载最多次数 var num = 1; var totalheight = 0; var main = $("#content"); //主体元素 $(window).scroll(function(){ var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) totalheight = parseFloat($(window).height()) + parseFloat(srollPos); if (($(document).height() - range) <= totalheight && num != maxnum) { $.ajax({ url: "../demo/HandlerDemo.ashx",//显示数据的方法页 type: "GET", data: "name=json", dataType: "json", //cache: false, success: function (data) { data = eval(data); var varHtml = ""; varHtml = "<ul>" $(data).each(function (i) { varHtml += "<li>" + data[i].ID + ":" + data[i].Event + "</li>"; //ID 和Event为数据库映射的字段 }); varHtml += "</ul>"; main.append("<div style='border:0px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "<br />"+varHtml + "---" + num + "</div>"); }, error: function () { alert("error"); } }); num++; } }); }); </script> <style type="text/css"> li { list-style-type:none; float:left; padding-left:20px; } </style> </head> <body> <form id="form1" runat="server"> <div id="content" style="height:960px"> <div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div> <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div> </div> </form> </body> </html>- 上一个程序编程： .net 添加Cookie的4种方法
- 下一个程序编程： asp.net后台如何输出js脚本使用什么方法可以实现
