一个简单的例子演示：通过浏览器的滚动条来动态加载数据

最新推荐文章于 2020-03-02 23:57:46 发布

weixin_30398227

最新推荐文章于 2020-03-02 23:57:46 发布

阅读量105

点赞数

文章标签： xhtml ui javascript ViewUI

原文链接：http://www.cnblogs.com/Music/archive/2012/07/28/html-ajax-load-data-with-browser-scroll-down.html

版权

直接贴代码了：

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="CSASPNETInfiniteLoading._Default" %>

<!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 id="Head1" runat="server">
    <title>Infinite loading</title>
    <link rel="stylesheet" href="Styles/Site.css" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            function lastPostFunc() {
                $('#divPostsLoader').html('<img src="images/bigLoader.gif">');

                //send a query to server side to present new content
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/Foo",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {

                        if (data != "") {
                            $('.divLoadData:last').after(data.d);
                        }
                        $('#divPostsLoader').empty();
                    }

                })
            };

            //When scroll down, the scroller is at the bottom with the function below and fire the lastPostFunc function
            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    lastPostFunc();
                }
            });

        });
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <div style="height: 900px">
        <h1>
            Simply scroll down to see new content loading...</h1>
    </div>
    <div class="divLoadData">
    </div>
    <div id="divPostsLoader">
    </div>
    </form>
</body>
</html>

后台代码：

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Text;

namespace CSASPNETInfiniteLoading
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }


        [WebMethod]
        public static string Foo()
        {
            StringBuilder getPostsText = new StringBuilder();
            using (DataSet ds = new DataSet())
            {
                ds.ReadXml(HttpContext.Current.Server.MapPath("App_Data/books.xml"));
                DataView dv = ds.Tables[0].DefaultView;

                foreach (DataRowView myDataRow in dv)
                {
                    getPostsText.AppendFormat("<p>author: {0}</br>", myDataRow["author"]);
                    getPostsText.AppendFormat("genre: {0}</br>", myDataRow["genre"]);
                    getPostsText.AppendFormat("price: {0}</br>", myDataRow["price"]);
                    getPostsText.AppendFormat("publish date: {0}</br>", myDataRow["publish_date"]);
                    getPostsText.AppendFormat("description: {0}</br></p>", myDataRow["description"]);
                }
                getPostsText.AppendFormat("<div style='height:15px;'></div>");

            }
            return getPostsText.ToString();
        }
    }
}

谢谢浏览！

转载于:https://www.cnblogs.com/Music/archive/2012/07/28/html-ajax-load-data-with-browser-scroll-down.html

weixin_30398227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的例子演示：通过浏览器的滚动条来动态加载数据

直接贴代码了：<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSASPNETInfiniteLoading._Default" %><!DOCTYPE html PUBLIC "-//W3C//D...
复制链接

扫一扫