PHP ajax bug 加载更多

Question

嗨，我有一个应用程序，如果用户单击“加载更多”按钮，它将显示来自数据库的数据，但问题是，一旦获取所有数据，该按钮仍然会显示，如果用户再次单击该按钮，则会显示相同的数据重复。这是代码，但我不确定问题出在哪里。

从json中获取数据并加载到，按钮点击触发json获取数据事件

<ul class="module-list">                            

</ul>
<a class="btn-btn blue-blue more-wishlists" href="#" onclick="javascript:getRecentActivity(event)">
<span data-component-bound="true" class="loading-msg">See more recent activity</span>
</a>

Javascript

$(document).ready(function(){
getRecentActivity(null);
});

function getRecentActivity(event)
{
     if (event != null){
            disabledEventPreventDefault(event);
        }
    $.ajax({
        url:"<?=$this->baseUrl('activity/activityfeed')?>",
        data:{'total':totalRecordsView},
        dataType:"json",
        type:"POST",
        success:function(data){
            totalRecordsView = data['total_view'];

            data = data['result'];

            var activityHtml =  ''

            for(var i=0; i<data.length; i++){   
            activityHtml += '<li class="clearfix media-block review-block module-li" >'+
                '<div class="user-info-activity">'+
                    '<div class="photo-box pb-60s">'+
                        '<a href="#">';

            if(data[i]['img_url']){
                    activityHtml +='<img class="photo-img" alt="" height="60" src="'+data[i]['img_url'][0]['u_img']+'" width="60">';
                } else {
                    activityHtml +='<img class="photo-img" alt="" height="60" src="'+data[i]['review'][0]['u_img']+'" width="60">';
                }

            activityHtml +='</a></div></div>'+
                '<div class="media-story">'+
                    '<div class="feed-content">'+
                        '<div class="item-title clearfix">'+
                            '<div class="title-text">';

            if(data[i]['img_url']){
            activityHtml += '<a class="user-name"'+
                'href="user/'+data[i]['img_url'][0]['user_unique_name']+'" data-hovercard-id="">'+
                    ''+data[i]['img_url'][0]['name']+'</a> '+
                        ' added 1 photo for <a class="user-name" href="business/'+data[i]['img_url'][0]['business_name_url']+'">'+data[i]['img_url'][0]['business_name']+'</a></div>'+
                                '<div class="timestamp fine-print"><abbr class="timeago" '+
                    'title="'+getTime(data[i]['date_added'])+'">'+getTime(data[i]['date_added'])+'</abbr></div>'+
                    '</div></div>'+ 
                        '<div class="item-description">'+                           
                            '<ul class="photo-list large clearfix"><li>'+
                                '<div class="photo-info-box">'+
                    '<img src="../public/assest/business/biz_'+data[i]['img_url'][0]['photo_url']+'" alt="Photo of Community Lending Network" width="120" height="120">'+
                        '</div></li></ul>';

                } else {
                    if(data[i]['review'][0]['u_img_rating'] == 50){
                        var title = '5.0 star rating';
                    } else {
                        title = 'x star rating';
                        }
                            activityHtml += '<a class="user-name"'+
                                'href="user/'+data[i]['review'][0]['user_unique_name']+'" data-hovercard'+
                                    '-id="EObvJWZ_R5SFg7L1ePTpKA">'+data[i]['review'][0]['name']+'</a> '+
                                        ' reviewed '+
                    '<a class="biz-name" href="business/'+data[i]['review'][0]['business_name_url']+'" data-hovercard-id="t61v_1fZbpPa4cyST4Dy8g">'+
                            data[i]['review'][0]['business_name']+
                                '</a></div>'+

            '<div class="timestamp fine-print"><abbr class="timeago" '+
                'title="'+getTime(data[i]['date_added'])+'">'+getTime(data[i]['date_added'])+'</abbr></div></div></div>'+

                '<div class="item-description">'+
                    '<div class="rating">'+
                            '<i class="star-img stars_4" title="'+title+'">'+
                                '<img alt="'+title+'" class="" height="15"'+
                    'src="../public/images/star/stars_'+data[i]['review'][0]['u_img_rating']+'.gif"'+
                    'width="75"></i></div>'+

                '<p class="review-expandable" data-component-bound="true">'+
                '<span>'+data[i]['review'][0]['review_desc']+'</span></p>' +

'<div class="rateReview clearfix" id="'+data[i]['review_id']+'" data-component-bound="true">'+
                '<p class="review-intro review-message saving-msg" data-component-bound="true">Was this review ...?</p>'+
                '<ul data-component-bound="true" class="voteset'+data[i]['review_id']+'">'+
                    '<li class="useful ufc-btn" id="1">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"useful") rel="useful"><span>Useful</span></a>';

        if(data[i]['vote'][0]['useful'] == null){
            activityHtml +='<span></span>';
                } else {
                    activityHtml +='<span>('+data[i]['vote'][0]['useful']+')</span>';
                }

                    activityHtml +='</li>'+
                    '<li class="funny ufc-btn" id="2">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"funny") rel="funny"><span>Funny</span></a>';

        if(data[i]['vote'][0]['funny'] == null){
            activityHtml +='<span></span>';
                } else {
                        activityHtml +='<span>('+data[i]['vote'][0]['funny']+')</span>';
                    }

                    activityHtml +='</li>'+
                    '<li class="lame ufc-btn" id="3">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"lame") rel="lame"><span>Lame</span></a>';
                        if(data[i]['vote'][0]['lame'] == null){
                        activityHtml +='<span></span>';
                    } else {
                        activityHtml +='<span>('+data[i]['vote'][0]['lame']+')</span>';
                    }

                    activityHtml +='</li>'+
                '<span class="vote'+data[i]['review_id']+'"></span></ul>'+
                    '</div></div></div></div></li>';


                                        }

            }

            $('.module-list').append(activityHtml);

            if(totalRecords <= totalRecordsView){

                $('.btn-btn').text('Nothing beyond here ...');
                $('.btn-btn').removeAttr('onclick href');
            }
    }

    });

}

谢谢!!

Answer 1

尝试通过检查子元素的数量来包装 getRecentActivity 函数:

if ($('.module-list').children().length === 0) {

    //existing getRecentActivity() code here

}

这应该有效，因为您的 AJAX 调用将附加到 .module-list ul元素，并且在调用成功完成一次后，它不应再为空。

更详细的解释在这里:How can I count the number of children?

<小时/>

另外，一些建议:

1) 在 jQuery 中，您可以通过在 $(document).ready() block 内设置事件处理程序来避免使用内联“onclick”属性，如下所示:

$(document).ready(function () 

    $('.more-wishlists').click(function (event) {  

        //put the contents of your "getRecentActivity" function here
        //and it will be called when an element with the class
        //"more-wishlists" is clicked

    });

});

2) 考虑使用<button>元素而不是 <a>您现在正在使用:

  <button class="btn-btn blue-blue more-wishlists" type="button">
    See more recent activity
  </button>

从语义上讲，它可能更有意义，并且可能还会减少标记量。