Javascript 使用jquery重新加载/刷新页面的部分

我有一个HTML页面，它被分成几个div。每个div包含一个特定的部分。一次只显示一个部分。我的要求是在从一个部分移动到另一个部分时刷新每个部分。请看下面URL中的代码

jquery代码

    // overwrite $jScroller to supply asynchronous callback when end has been reached:
    $jScroller.scroll = function() {
      for (var i in $jScroller.config.obj) {
           if ($jScroller.config.obj.hasOwnProperty(i)) {
               var
                obj        = $jScroller.config.obj[i],
                left       = Number(($jScroller.get.px(obj.child.css('left'))||0)),
                top        = Number(($jScroller.get.px(obj.child.css('top'))||0)),
                min_height = obj.parent.height(),
                min_width  = obj.parent.width(),
                height     = obj.child.height(),
                width      = obj.child.width();

               if (!obj.pause) {
                   switch(obj.direction) {
                    case 'up':
                     if (top <= -1 * height) {
                         $jScroller.stop();
                         obj.child.css('top','0px');
                         manager.callback();
                         break;
                     }
                     obj.child.css('top',top - obj.speed + 'px');
                    break;
                    case 'right':
                     if (left >= min_width) {left = -1 * width;}
                     obj.child.css('left',left + obj.speed + 'px');
                    break;
                    case 'left':
                     if (left <= -1 * width) {left = min_width;}
                     obj.child.css('left',left - obj.speed + 'px');
                    break;
                    case 'down':
                     if (top >= min_height) {top = -1 * height;}
                     obj.child.css('top',top + obj.speed + 'px');
                    break;
                   }
               }
           }
      }
    }

    $jScroller.start = function() {
        if ($jScroller.cache.timer === 0 && $jScroller.config.refresh > 0) {
            $jScroller.cache.timer = window.setInterval($jScroller.scroll, $jScroller.config.refresh);
        }
    };

$(document).ready(function() {

        function SectionManager() {
            this.delayShortList = 15000;
            this.marginShortList = 12;
            this.currentSection = null;
            this.sections = $("#content .section");
            this.numSections = this.sections.length;

            this.transition = function (){
                    //SCROLLER CODE STARTS HERE....
                     $jScroller.config.refresh = 100;
                    // Add Scroller Object
                    $jScroller.config.obj = [];
                    $jScroller.add(
                        "#content .section.active .activityTbl"
                        ,"#content .section.active .activityTbl > table"
                        ,"up"
                        , 3
                    );
                    // Start Autoscroller
                    $jScroller.start();
                    $jScroller.cache.init = true;
                    //SCROLLER CODE ENDS HERE....
            };
            this.onFullCycleCompleted = function () {
                //window.location.replace(window.location.href);
                alert("the following will trigger a page reload (UNLESS run from within jsfiddle): window.location.replace(window.location.href);");
            };
            this.callback = function () {
                if (this.currentSection >= this.numSections-1) {
                    this.onFullCycleCompleted();
                };
                this.currentSection = (this.currentSection != null)
                    ? (this.currentSection + 1) % this.numSections
                    : 0
                ;
                $("#content .section").removeClass("active");
                var $currentSection = $("#content .section:eq(" + this.currentSection + ")");
                $currentSection.addClass("active");
                var itemCount = $(".activityTbl table.data tr", $currentSection).length;
                if (itemCount < this.marginShortList) {
                    setTimeout(function() {
                        manager.transition();
                    }, this.delayShortList);
                } else {
                    this.transition();
                };
            };

            this.run = function(){
                this.callback();
            };

        }

        manager = new SectionManager();
        manager.run();

});

//覆盖$jScroller以在到达结束时提供异步回调：
$jScroller.scroll=函数（）{
for（var i，单位为$jScroller.config.obj）{
if（$jScroller.config.obj.hasOwnProperty（i））{
变量
obj=$jScroller.config.obj[i]，
左=数字（$jScroller.get.px（obj.child.css（'left'））| | 0）），
top=Number（$jScroller.get.px（obj.child.css（'top'））| | 0）），
最小高度=对象父级高度（），
min_width=obj.parent.width（），
高度=对象子对象高度（），
width=obj.child.width（）；
如果（！对象暂停）{
开关（目标方向）{
案例“向上”：
如果（顶部=最小宽度）{left=-1*宽度；}
css（'left'，left+obj.speed+'px'）；
打破
案例“左”：
如果（左=最小高度）{top=-1*高度；}
css（'top'，top+obj.speed+'px'）；
打破
}
}
}
}
}
$jScroller.start=函数（）{
如果（$jScroller.cache.timer==0&&$jScroller.config.refresh>0）{
$jScroller.cache.timer=window.setInterval（$jScroller.scroll，$jScroller.config.refresh）；
}
};
$（文档）.ready（函数（）{
职能部门经理（）{
此.delayShortList=15000；
此.marginShortList=12；
this.currentSection=null；
this.sections=$（“#content.section”）；
this.numSections=this.sections.length；
this.transition=函数（）{
//滚动条代码从这里开始。。。。
$jScroller.config.refresh=100；
//添加滚动条对象
$jScroller.config.obj=[]；
$jScroller.add(
“#content.section.active.activityTbl”
，“#content.section.active.activityTbl>表”
“向上”
3.
);
//启动自动旋转器
$jScroller.start（）；
$jScroller.cache.init=true；
//滚动条代码到此结束。。。。
};
this.onFullCycleCompleted=函数（）{
//window.location.replace（window.location.href）；
警报（“以下内容将触发页面重新加载（除非从JSFIDLE中运行）：window.location.replace（window.location.href）；”；
};
this.callback=函数（）{
if（this.currentSection>=this.numSections-1）{
这个.onFullCycleCompleted（）；
};
this.currentSection=（this.currentSection！=null）
？（this.currentSection+1）%this.numSections
: 0
;
$（“#content.section”）.removeClass（“active”）；
var$currentSection=$（“#content.section:eq”（“+this.currentSection+”）；
$currentSection.addClass（“活动”）；
var itemCount=$（“.activityTbl table.data tr”，$currentSection）.length；
if（itemCount

---

页面基本上显示Activity1，然后显示Activity2，依此类推。我的要求是在内容从Activity1移动到Activity2时刷新内容，然后再显示。这样我就可以从服务器获得最新的信息

当一个部分处于活动状态时（在

this.callback

函数或

run

中），添加一个以获取数据

    $.ajax()

对于当前+1区段和区段的

    $(yoursectiondata).html()

编辑：添加到回调函数的ajax调用如下：

    var nextSection = this.currentSection + 1;
    $.ajax({
        url: 'your data source or update_script.php',
        data: {'section_id': nextSection },
        dataType: 'html',
        type: 'GET',
        success: function (result) {
            $("#content .section:eq(" + nextSection + ")").html(result);
        }
    });

编辑：因为您坚持要重新加载页面，而不仅仅是检索部分。唯一的方法是告诉你的服务器你在哪个部分，这样新服务的页面就会知道从哪个部分继续。这肯定是不太优雅的选项，所以我想鼓励您使用ajax调用。然而，这就是它的工作原理：

节结束后，调用并通过GET将

sectionid

传递给服务器

var nextSection = this.currentSection + 1;
window.location.replace('your-page-url/page.php?sectionid=' + nextSection)

在服务器上，您获取节id并将其与新页面一起传递（服务器端您可以将其集成到表中，或者对节进行重新排序，等等），在php中类似这样：

//get the section id
$sectionid = $_GET['sectionid'];
// for example integrate the id somewhere on the page
echo "<input type='hidden' id='sectionid' value=".$sectionid." />"

现在，您可以在jQuery脚本中使用这个

sectionid

，来显示节的内容

但是，如果您在每个部分之后都这样做，那么您最好在页面上一次加载一个部分，因为您不会一次显示更多内容。我不明白为什么您更喜欢这种方法而不是ajax调用。但是给你

上次编辑：

这是我的最终解决方案。不，你不能只是在每个部分之后重新加载页面，然后神奇地期望它知道从哪里开始。但是使用ajax，您可以调用相同的html页面，提取下一部分并将其放入当前页面DOM中

            $.ajax({
                url: 'your-page.html',
                dataType: 'html',
                success: function (result) {
                   content1 = $(result).find("#content .section:eq(" + nextSection + ")").html();
                   $("#content .section:eq(" + nextSection + ")").html(content1);
                },
                error: function (result) {
                   $("#content .section:eq(" + nextSection + ")").html("error refreshing");
                }
            });

W

            $.ajax({
                url: 'your-page.html',
                dataType: 'html',
                success: function (result) {
                   content1 = $(result).find("#content .section:eq(" + nextSection + ")").html();
                   $("#content .section:eq(" + nextSection + ")").html(content1);
                },
                error: function (result) {
                   $("#content .section:eq(" + nextSection + ")").html("error refreshing");
                }
            });