Question

我使用jquery AJAX从MySQL数据库加载更多帖子。它提出了正确的内容，并且运行得很好。

唯一的问题是它每次显示前两张图片后的数据。假设共有10张图片，前两张已经显示。

图片1 image 2

点击加载更多按钮时，它的外观如何图片1 图片2 图片3 image 4

现在，如果我再次按下加载更多按钮，则显示内容

图片1 图片2 图片5 图片6 图片3 image 4

如果我再次按它，它将在1和2之后粘贴7和8，依此类推

这是我的HTML

            $rowperpage = 2;
            $select_count=mysqli_query($con,"SELECT count(*) as allcount from gif where status = 1");
            $select_data=mysqli_fetch_array($select_count);
            $allcount=$select_data['allcount'];
            $run=mysqli_query($con,"SELECT * FROM gif WHERE status=1 order by id desc limit ".$rowperpage);
            if(!$run){
            echo mysqli_error($con);
            }
            while ($row=mysqli_fetch_array($run)) {
                $image=$row['gif'];
                $id=$row['id'];
                $title=$row['title'];
                ?>
                <div class = "load-more-post">
                <div class="col-md-3 col-sm-4 col-xs-12" style="margin-bottom:10px;">
                    <div classs="panel panel-info">
                        <div classs="panel panel-body ">

                            <a href='blog.php?gifId=<?php echo $id; ?>'><img src="Uploads/<?php echo $image; ?> " class="img img-responsive img-thumbnail"  style='height: 260px; width: 250px; '></a>

                        </div>
                    </div>
                </div>
                </div>

            <?php }?>
 <h1 class="load-more">Load More</h1>
 <input type="hidden" id="row" value="<?php echo $id; ?>">
 <input type="hidden" id="all" value="<?php echo $allcount; ?>">

这是我的Javascript

$(document).ready(function(){

// Load more data
$('.load-more').click(function(){
    var row = Number($('#row').val());
    var allcount = Number($('#all').val());
    //row = row + 2;

    if(row != 4){
        $("#row").val(row);


      $.ajax({
            url: 'getData.php',
            type: 'post',
            data: {row:row},
            beforeSend:function(){
                $(".load-more").text("Loading...");
            },
            success: function(response){

                // Setting little delay while displaying new content
                setTimeout(function() {
                    // appending posts after last post with class="post"
                    $(".load-more-post").after(response);
                    //var rowno = row + 2;
                    var thenewid = Number($('#newid').val());
                  alert(thenewid);
                    $("#row").val(thenewid);
                    // checking row value is greater than allcount or not
                    if(thenewid == 4){


                        // Change the text and background
                        $('.load-more').text("No more posts");
                        $('.load-more').addClass('inactiveLink');

                    }
                    else{
                        $(".load-more").text("Load more");
                    }
                }, 2000);


            }
        });
    }


});

});

这是我从中获取数据的PHP文件。访问getdata.php

 $row = $_POST['row'];
$rowperpage = 2;

// selecting posts
$run=mysqli_query($con,"SELECT * FROM gif WHERE status=1 and id < $row order by id desc limit ".$rowperpage);
            if(!$run){
            echo mysqli_error($con);
            }



while($row = mysqli_fetch_array($run)){
$image=$row['gif'];
                $id=$row['id'];
                $title=$row['title'];
                ?>
                <div class="col-md-3 col-sm-4 col-xs-12" style="margin-bottom:10px;">
                    <div classs="panel panel-info">
                        <div classs="panel panel-body" >

                            <a href='blog.php?gifId=<?php echo $id; ?>'><img src="Uploads/<?php echo $image; ?> " class="img img-responsive img-thumbnail"  style='height: 260px; width: 250px; '></a>

                        </div>
                    </div>
                </div>

            <?php       
      }?>

      <input type="hidden" id="newid" value="<?php echo $id; ?>">

Answer 1

您使用

$(".load-more-post").after(response);

在.load-more-post div之后插入新帖子。这个特殊的div包含在您的初始帖子中，因此可以解释为什么它会被添加到那里。如果您希望最旧的永远是最后一个，我建议改为使用.before，如下所示：

$(".load-more").before(response);

jquery loadmore无法正常工作

1 个答案: