使用jQuery，AJAX和ASP.NET动态加载数据页上的滚动

介绍

 

在Facebook上，你可能会看到你的朋友，你的browserâ的滚动条滚动时动态加载的状态更新。在这篇文章中，我将解释如何，我们可以使用jQuery和AJAX做到这一点的 

 

使用代码

 

该解决方案包括两个Web窗体（的Default.aspx和AjaxProcess.aspx）的。的Default.aspx包含一个 DIV ID myDiv。最初息包含一些静态的数据，那么数据是动态附加到它使用jQuery和AJAX， 

 

<div id="myDiv">

<p>Static data initially rendered.</p>

</div>

第二个Web的表AjaxProcess.aspx包含一个Web方法的GetData（）被调用使用AJAX来检索数据。

 

[WebMethod]

public static string GetData()

{

    string resp = string.Empty;

    resp += "<p>This content is dynamically appended to the existing content on scrolling.</p>";

    return resp;

}

现在，我们可以添加一些jQuery脚本中的Default.aspx页面滚动和调用的GetData（）方法将被放弃。

 

$(document).ready(function () {

 

   $(window).scroll(function () {

       if ($(window).scrollTop() == $(document).height() - $(window).height()) {

           sendData();

       }

   });

 

   function sendData() {

       $.ajax(

        {

            type: "POST",

            url: "AjaxProcess.aspx/GetData",

            data: "{}",

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            async: "true",

            cache: "false",

 

            success: function (msg) {

                $("#myDiv").append(msg.d);

            },

 

            Error: function (x, e) {

                alert("Some error");

            }

        });

   }

});

这里，为了检查，滚动是否已移至底部，用于在下述条件。

$(window).scroll(function () {

   if ($(window).scrollTop() == $(document).height() - $(window).height()) {

       sendData();

   }

});

此条件下，将确定的涡旋盘是否已经移动到的底部或没有。如果它已经到了谷底，动态的数据将得到从服务器加载，并获得追加到myDiv。

success: function (msg) {

    $("#myDiv").append(msg.d);

},

 

站长行业门户(www.software8.co)文章，希望大家可以留言建议