2

我正在开发一个 Web 应用程序，登录后用户被重定向到收件箱页面，
在那里他会发现许多小部件，每个小部件都有数百条记录。
所以登录成功后打开收件箱页面需要太多时间。非常多的性能问题。

所以我想在每个小部件中显示一些（5-10）条记录

在页面加载到后端（用户不知道）之后，请求将继续处理并获取记录并将它们附加到小部件记录中。

例如。如果您打开 google 图片并搜索 cricket，它将显示带有图片的页面，如果您仅向下滚动，您将知道 ajax 请求正在执行并将响应附加到网页，

但它不是等到整个页面加载完毕。

我必须以同样的方式开发我的应用程序。

任何想法都是高度赞赏和示例代码。

4

2 回答 2

3

这应该对你有用，乔达里先生。

您需要一些东西来处理后端的请求。由于您没有指定您是使用 Java 还是 PHP 还是 Python 或其他什么，所以我使用了 PHP - 这是我最了解的 :D

伪代码 (loadmore.jsp)

Begin 

widget = URL(widget) //the widget id or name
page = URL(page) //the page being retrieved

switch (widget) 
{
case "widget1":
data_for_widget1 = paginated_query1(page)
print data_for_widget1
break

case "widget2":
data_for_widget2 = paginated_query2(page)
print data_for_widget2
break

default :
print "Invalid Widget"
break

}

End

PHP版本 

<?php
if (isset($_GET['page'])) {
    $widget = $_GET['page'];
    $page = $_GET['page'];
    switch ($widget) {
        case "MyWidget1": //dynamic example
            $manyManyItems; //A massive array of items
            $pages = array_chunk($manyManyItems, 5); //break it up into chunks of 5 items
            if( array_key_exists ($pages[$page]) )
                for ($i = 0; $i < count($pages[$page]); $i++) { //load those chunks
                    echo '<div class="item">'.$pages[$page][$i].'</div>';
                }
            else {
                echo "zero"; //code word that tells ajax that there is nothing more to load
            }
            break;

        case "MyWidget2": //manual example
            if($page==1) { //loads the first chunck manually
                echo '<div class="item">dynamic content 1</div>';
                echo '<div class="item">dynamic content 2</div>';
                echo '<div class="item">dynamic content 3</div>';
            }
            elseif($page==2) { //loads the next batch
                echo '<div class="item">dynamic content 1</div>';
                echo '<div class="item">dynamic content 2</div>';
                echo '<div class="item">dynamic content 3</div>';
            }
            else
                echo "zero"; //code word that tells ajax that there is nothing more to load
            break;

        default:
            echo "zero"; //code word that tells ajax that there is nothing more to load
    }
}
?>

HTML 每个小部件可能看起来像这样

<div id="MyWidget1" class="widget" data-widgetPage="0">
   <div class="item">default content</div>
   <div class="item">another default content</div>
   ...
   <div class="loadmoreajaxloader" style="display:none;"><center>Loading...</center></div>
</div>

Javascript

<script type="text/javascript">
$(".widget").scroll(function()
{
    if($(this).scrollTop() == $(this).height() - $(this).height())
    {
        var nextPage = eval($(this).attr("data-widgetPage") + 1);
        $(this).find('.loadmoreajaxloader').show();
        $.ajax({
        url: "loadmore.php?widget="+$(this).attr("id")+"&page="+nextPage,
        success: function(html)
        {
            if(html != "zero")
            {
                $(this).append(html);
                $(this).('.loadmoreajaxloader').hide();
            }else
            {
                $(this).find('.loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });

        $(this).attr("data-widgetPage", nextPage);
    }
});
</script>

应用程序成功。

于 2012-09-28T10:44:47.773 回答
0

我从以下站点知道以下答案适合我的要求.. Jquery 无休止的滚动

于 2012-10-08T05:10:34.440 回答