溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何實(shí)現(xiàn)瀏覽器窗口滾動(dòng)加載數(shù)據(jù)采用異步形式從后臺(tái)加載數(shù)據(jù)

發(fā)布時(shí)間：2021-10-08 14:28:41 來(lái)源：億速云 閱讀：110 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“如何實(shí)現(xiàn)瀏覽器窗口滾動(dòng)加載數(shù)據(jù)采用異步形式從后臺(tái)加載數(shù)據(jù)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何實(shí)現(xiàn)瀏覽器窗口滾動(dòng)加載數(shù)據(jù)采用異步形式從后臺(tái)加載數(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>滾動(dòng)加載數(shù)據(jù)庫(kù)數(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; //距下邊界長(zhǎng)度/單位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(); //滾動(dòng)條距頂部距離(頁(yè)面超出窗口的高度)

totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if (($(document).height() - range) <= totalheight && num != maxnum) {
$.ajax({
url: "../demo/HandlerDemo.ashx",//顯示數(shù)據(jù)的方法頁(yè)
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ù)庫(kù)映射的字段
});
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" >
<div id="follow">this is a scroll test;<br/> 頁(yè)面下拉自動(dòng)加載內(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>

到此，相信大家對(duì)“如何實(shí)現(xiàn)瀏覽器窗口滾動(dòng)加載數(shù)據(jù)采用異步形式從后臺(tái)加載數(shù)據(jù)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手