zoukankan      html  css  js  c++  java
  • ajax滚动条懒加载

    前端html

    <div class="activity_box">
      <ul class="clearfix" id="contact">
         <!--内容-->
      </ul>
      <div id="loading" style="text-align: center">
        <img src="/images/loading.gif" alt="" />正在加载数据,请稍候...
    </div> </div>

    前端JS:

    <script>
        var pageindex = 1;
        var DataIsNull = false;
        function GetData(pageindex) {
            var url = "ajax/do_data.ashx";
            var act = "activity";
    
            $.ajax({
                type: "POST",
                url: url,
                dataType: "html",
                async: true,
                data: {
                    "act": act,
                    "page": pageindex
                },
                beforeSend: function () {
                    ShowDiv();
                },
                complete: function () {
                    HiddenDiv();
                },
                success: function (data) {
                    if (data == "") {
                        DataIsNull = true;
                    }
                    $("#contact").append(data);
    
                }
            });
        }
        GetData(pageindex);
    
        //显示加载数据
        function ShowDiv() {
            $("#loading").show();
        }
    
        //隐藏加载数据
        function HiddenDiv() {
            $("#loading").hide();
        }
    
    
    
        //滚动条滚动事件
        $(window).scroll(function () {
            if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                if (!DataIsNull) {
                    next();
                }
            }
        });
    
        function next() {
            pageindex++;
            GetData(pageindex);
        }</script>

    后端代码:

    public void activity()
        {
            int maxPageSize = 8;
            int pageID = Convert.ToInt32(HttpContext.Current.Request.Form["page"]);
            int newsCount = BLLNewsInfo.GetRecordCount("");//新闻总数
            int PageCount = newsCount / maxPageSize + (newsCount % maxPageSize == 0 ? 0 : 1);//最大页数
            int MaxPerPage1 = pageID == PageCount ? (newsCount - (PageCount - 1) * maxPageSize) : maxPageSize;
            if (pageID > PageCount)
            {
                HttpContext.Current.Response.Write("");
            }
            else
            {
                News_InfoList = BLLNewsInfo.GetListByPage("1=1", " AddDate", MaxPerPage1, maxPageSize * pageID);
                StringBuilder html = new StringBuilder();
                foreach (SHLY.Model.News_Info item in News_InfoList)
                {
                    html.AppendLine("<li>");
                    html.AppendLine("<a href="/news-" + item.Id + ".html" title="" + item.Title + "" >");
                    html.AppendLine("<img src="" + item.TitlePic + ""/>");
                    html.AppendLine("</a>");
                    html.AppendLine("<p><a href="/news-" + item.Id + ".html" title="" + item.Title + "" >");
                    html.AppendLine("" + item.Title + "</a></p>");
                    html.AppendLine("</li>");
                }
                HttpContext.Current.Response.Write(html.ToString());
            }
        }
  • 相关阅读:
    利用同步辅助类CountDownLatch计算多线程的运行时间
    i++的原子性问题
    Volatile关键字以及线程的内存可见性问题
    创建线程的第三种方式以及简单使用
    java8新特性-lambda表达式和stream API的简单使用
    springboot整合activemq
    springboot整合redis单机及集群
    JAVA-基础(一)
    CentOS-文件操作
    理解AngularJS的作用域Scope
  • 原文地址:https://www.cnblogs.com/zzx849918265/p/9436692.html
Copyright © 2011-2022 走看看