jQuery结合AJAX之在页面滚动时从服务器加载数据(2)

$(document).ready( function() { $contentLoadTriggered = false; $("#mainDiv").scroll( function() { if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false) $contentLoadTriggered == false) { $contentLoadTriggered = true; $.ajax( { type: "POST", url: "LoadOnScroll.aspx/GetDataFromServer", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", async: true, cache: false, success: function (msg) { $("#wrapperDiv").append(msg.d); $contentLoadTriggered = false; }, error: function (x, e) { alert("The call to the server side failed. " + x.responseText); } } ); } } ); } );

这里，为检查滚动条是否已经移动到了底部，使用了下面的条件判断，
 

if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false)

这个条件将判断滚动条是否已经到达了底部，当它已经移动到了底部，动态数据将从服务器端加载，并且插入wrapperDiv。把数据插入目标div元素的客户端脚本将在异步调用返回成功时执行。
 

success: function (msg) { $("#wrapperDiv").append(msg.d); $contentLoadTriggered = false; }

这里，你将注意到只有在用户移动滚动到了底部时，请求才会送到服务器端。

我粘贴了几个样图：
Output

您可能感兴趣的文章: