瀏覽器窗口滾動加載數(shù)據(jù)采用異步形式從后臺加載數(shù)據(jù)
更新時間：2014年01月14日 15:54:29 作者：
在滾動條距頂部距離(頁面超出窗口的高度)時采用異步形式從后臺加載數(shù)據(jù)，下面是具體的實(shí)現(xiàn)，希望對大家有所幫助
以下滾動效果為在網(wǎng)上查找。
在滾動條距頂部距離(頁面超出窗口的高度)時采用異步形式從后臺加載數(shù)據(jù)
<%@ 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>滾動加載數(shù)據(jù)庫數(shù)據(jù)</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; //設(shè)置加載最多次數(shù)
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",//顯示數(shù)據(jù)的方法頁
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為數(shù)據(jù)庫映射的字段
});
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/> 頁面下拉自動加載內(nèi)容</div>
<div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>
</div>
</form>
</body>
</html>
在滾動條距頂部距離(頁面超出窗口的高度)時采用異步形式從后臺加載數(shù)據(jù)
復(fù)制代碼 代碼如下:
<%@ 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>滾動加載數(shù)據(jù)庫數(shù)據(jù)</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; //設(shè)置加載最多次數(shù)
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",//顯示數(shù)據(jù)的方法頁
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為數(shù)據(jù)庫映射的字段
});
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/> 頁面下拉自動加載內(nèi)容</div>
<div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>
</div>
</form>
</body>
</html>
您可能感興趣的文章:
- EASYUI TREEGRID異步加載數(shù)據(jù)實(shí)現(xiàn)方法
- struts2+jquery+json實(shí)現(xiàn)異步加載數(shù)據(jù)(自寫)
- asp.net 使用js分頁實(shí)現(xiàn)異步加載數(shù)據(jù)
- 自寫的jQuery異步加載數(shù)據(jù)添加事件
- Blocksit插件實(shí)現(xiàn)瀑布流數(shù)據(jù)無限( 異步)加載
- jQuery異步加載數(shù)據(jù)并添加事件示例
- 如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
相關(guān)文章
.NET中讀取Excel文件的數(shù)據(jù)及excelReader應(yīng)用
輕量，快速的C＃編寫的庫讀取Microsoft Excel文件,這對讀取大量excel文件的朋友們很有幫助而且可以學(xué)習(xí)下ExcelDataReader的應(yīng)用，感興趣的朋友可以了解下，或許對你有所幫助2013-02-02
ASP.NET筆記之文章發(fā)布管理小系統(tǒng)案例
本篇文章小編為大家介紹，ASP.NET筆記之文章發(fā)布管理小系統(tǒng)案例。需要的朋友參考下2013-04-04
怎樣將字符串轉(zhuǎn)為.cs頁面中的HtmlTable，在論壇上看到了這樣一個問題，想試著把它解決下，感興趣的朋友可以觀看下本文的動畫，或許對你有所幫助2013-03-03
這篇文章主要介紹了ASP.NET Core快速入門之環(huán)境篇，對跨平臺框架感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要給大家介紹了關(guān)于asp .net core靜態(tài)文件資源的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
通過RadioButton對DataList控件進(jìn)行單選實(shí)例說明
本例實(shí)現(xiàn)通過RadioButton對DataList控件進(jìn)行單選,aspx拉一個DataList控件，把RadioButton置于DataList的ItemTemplate模版內(nèi);在.aspx.cs內(nèi)為DataList控件綁定數(shù)據(jù),很實(shí)用的功能，感興趣的朋友可以了解下啊2013-01-01
這篇文章主要為大家詳細(xì)介紹了WPF氣泡樣式彈窗效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
.NET Core開發(fā)日志之OData（Open Data Protocol）
這篇文章主要給大家介紹了關(guān)于.NET Core開發(fā)日志之OData（Open Data Protocol）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
.NET Core創(chuàng)建一個控制臺（Console）程序
這篇文章主要為大家詳細(xì)介紹了.NET Core如何創(chuàng)建一個控制臺程序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
.net core高吞吐遠(yuǎn)程方法如何調(diào)用組件XRPC詳解
這篇文章主要給大家介紹了關(guān)于.net core高吞吐遠(yuǎn)程方法如何調(diào)用組件XRPC的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用.net core具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05