时间:2016-02-16 00:09 来源: 我爱IT技术网 作者:佚名
欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【浏览器窗口滚动加载数据采用异步形式从后台加载数据】，下面是详细的讲解！
浏览器窗口滚动加载数据采用异步形式从后台加载数据
<%@ 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>
关于浏览器窗口滚动加载数据采用异步形式从后台加载数据的用户互动如下：
相关问题：
答： >>详细
相关问题：
答： >>详细
相关问题：
答： >>详细
- 【asp】asp.net url重写浅谈-net-url重写
- 【DataSet】DataSet、DataTable、DataRow区别详解
- 【asp】asp.net 动态添加多个用户控件-net-动态添
- 【ASP】ASP.NET中内嵌页面代码的一个问题-NET-内
- 【创建】ASP.NET Web API教程 创建域模型的方法详
- 【Asp】Asp.net 页面调用javascript变量的值-net-
- 【ASP】ASP.NET 5升级后如何删除旧版本的DNX-NET5
- 【404页面】ASP.NET设置404页面返回302HTTP状态码
- 【asp】asp.net开发中常见公共捕获异常方式总结(
- 【Visual】分享Visual Studio原生开发的10个调试
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-