Ajax動態滾動載入資料
阿新 • • 發佈：2019-01-28
看新浪微博，人人網都有這樣的效果：滾動條滾動到最下面的時候，新的資料就被自動加載出來了，今天親自嘗試了一下這個效果的實現。
核心程式碼更新：
$(window).scroll(function(){
// 當滾動到最底部以上n畫素時， 載入新內容
if ($(document).height() - $(this).scrollTop() - $(this).height()<1) {
getData(gCurrentPage, gLongitude, gLatitude);
}
});首先，準備一個分頁的儲存過程：
CREATE PROCEDURE proctest @pagesize INT, @pagenumber INT AS SELECT * FROM ( SELECT ROW_NUMBER()OVER (ORDER BY userid)AS ROWNUM,c_name,user_email FROM ehrusers WHERE c_name<>'' ) AS products WHERE ROWNUM BETWEEN @pagesize*(@pagenumber-1)+1 and @pagesize*@pagenumber EXEC dbo.proctest 20, 1
接著，寫一個取資料的C#方法：
//Test public static DataTable GetTable(int pagesize, int pagenum) { string sql = string.Format(@"EXEC dbo.proctest {0}, {1}", pagesize, pagenum); DataSet ds = SqlHelper.ExecuteDataset(ConnString.GetConString, CommandType.Text, sql); if (ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0) { return ds.Tables[0]; } else { return null; } }
Ajax請求資料的邏輯，呼叫剛才的方法，返回JSON：
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["pagesize"] != null && Request.QueryString["pagenumber"] != null)
{
int pagesize = int.Parse(Request.QueryString["pagesize"].ToString());
int pagenumber = int.Parse(Request.QueryString["pagenumber"].ToString());
System.Data.DataTable dt = DB.GetTable(pagesize, pagenumber);
string json = Tools.CreateJsonParameters(dt);
Response.Write(json);
}
}其中用到了一個aspx頁面作為controller。
接下來，就是比較重要的頁面和js程式碼了：
頁面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滾動測試</title>
<style>
.mainDiv {
width: 800px;
border: solid 1px #f00;
padding: 10px;
}
.item {
width: 600px;
height: 50px;
border: solid 1px #00ff90;
font-size: 12px;
margin: 10px;
}
.title {
font-size: 16px;
line-height: 20px;
}
.content {
line-height: 14px;
}
</style>
<script src="Scripts/jquery-1.7.1.js"></script>
</head>
<body>
<h1>滾動測試</h1>
<div class="mainDiv">
<!--<div class="item">
<div class="title">title</div>
<div class="content">content content content content content content content</div>
</div>
-->
</div>
</body>
</html>
JS：
<script type="text/javascript">
var gPageSize = 10;
var i = 1; //設定當前頁數，全域性變數
$(function () {
//根據頁數讀取資料
function getData(pagenumber) {
i++;//頁碼自動增加，保證下次呼叫時為新的一頁。
$.get("Ajax.aspx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {
if (data.length > 0) {
var jsonObj = JSON.parse(data);
insertDiv(jsonObj.Head);
}
});
}
//初始化載入第一頁資料
getData(1);
//生成資料html，append到div中
function insertDiv(json) {
var $mainDiv = $(".mainDiv");
var html = '';
for (var i = 0; i < json.length; i++) {
html += '<div class="item">';
html += ' <div class="title">' + json[i].ROWNUM + ' ' + json[i].c_name + '</div>';
html += '<div class="content">' + json[i].user_email + '</div>';
html += '</div>';
}
$mainDiv.append(html);
}
//==============核心程式碼=============
var winH = $(window).height(); //頁面可視區域高度
//定義滑鼠滾動事件
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滾動條top
var aa = (pageH - winH - scrollT) / winH;
if (aa < 0.02) {//0.02是個引數
getData(i);
}
});
//==============核心程式碼=============
});
</script>最終效果：
滾動前：
滾動自動重新整理：
後來又對這一版本進行了一些改進，詳見：