当ajax查询没有返回数据时如何更改div

时间:2012-01-28 14:30:26

标签: jquery load scroll

当浏览率为40%时,使用jquery / ajax获取更多内容。

这是查询脚本;

$(document).ready(function(){
    var fetching = false;

        function lastPostFunc() {
            fetching = true;
                $('div#loadmorebutton').html('<a>Loading...pls wait</a>');
                $.post("loadmore.php?id=1&lastid="+$(".postitem:last").attr("id"),

        function(data){
            if (data != "") {
                    $(".postitem:last").after(data);
                        setTimeout(function(){
                        fetching = false;
                        },300);
                        $('div#loadmorebutton').empty();
                    } 
            });
        };


$(window).scroll(function(){
    var bufferzone = $(window).scrollTop() * 0.40;
    if (!fetching && ($(window).scrollTop() + bufferzone > ($(document).height()- $(window).height() ) )){
    lastPostFunc();
    } 
}); 

});

加载更多的div是;

<div id="loadmorebutton">Loading...pls wait</div>

一切都很好但是当它到达最后一个内容或者没有更多的内容要加载时,我希望“正在加载......请等待”以更改为“无需加载更多内容”。目前,它保持不变“正在加载...请等待”。我该怎么办?

NB。以下脚本可以正常工作并执行从“加载更多”到“不再加载内容”的更改。不使用此脚本的原因是,只有当您到达屏幕底部时才会触发它,这会导致双倍负载或三倍。尝试组合代码,但它仍然无效。

$(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            $('div#loadmorebutton').show();
            $.ajax({url: "loadmore.php?id=01&lastid=" + $(".postitem:last").attr("id"),
        success: function(html){
                    if(html){
                        $("#postswrapper").append(html);
                        $('div#loadmorebutton').hide();
                    }else{
                        $('div#loadmorebutton').html('<a>No more posts to show.</a>');
                    }
                }
            });
        }
    });

1 个答案:

答案 0 :(得分:0)

我认为当没有更多内容时,您会收到来自服务器的消息,请参阅此Server codes。当你得到它时,你应该能够根据它设置一条消息。运行AJAX时,请查看完整设置。在这里查找'(jqXHR,textStatus)':AJAX properties应该返回消息,设置规则然后你可以更新DOM。