使用Ajax，PHP加载更多帖子

Question

我在表格中显示帖子，然后尝试使用ajax调用更多帖子，但是我在这里遇到了问题，单击显示再次显示了更多相同的帖子，因此如何通过ID调用下一个帖子，另一个问题是单击显示更多更改加载并保持原样，我希望在加载帖子后将其隐藏。

我再次调用整个表，我认为只调用行会更好。 这是我的两个文件

index.php

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','.show_more',function(){
        var ID = $(this).attr('id');
        $('.show_more').hide();
        $('.loding').show();
        $.ajax({
            type:'POST',
            url:'ajax_more.php',
            data:'id='+ID,
            success:function(html){
                $('#show_more_main'+ID).remove();
                $('#posts').append(html);
            }
        });

    });
});
</script>


    $sql = "SELECT * FROM posts order by id desc limit 6";
    $query = $db->prepare($sql);
    $query->execute();
    $row = $query->fetch(PDO::FETCH_ASSOC);
    $ID = $row['id'];

    <div id="posts"> 
    <table>
    <tr>
    <?php do { //horizontal looper?>
    <td>
    <div>id</div>          
    <div>title</div>
    <div>body</div>          
    <div>date</div>
    </td>
    <?php
    $row = $query->fetch(PDO::FETCH_ASSOC);
    if (!isset($nested_List)) {
    $nested_List= 1;
    }
    if (isset($row) && is_array($row) && $nested_List++%3==0) {
    echo "</tr><tr>";
    }
    } while ($row); //end horizontal looper 
    ?>
    </table>
    <div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>
</div> 

ajax_more.php

<?php
include('db.php');
if(isset($_POST["id"]) && !empty($_POST["id"])){

$sql = "SELECT * FROM posts order by id desc limit 6";
$query = $db->prepare($sql);
$query->execute();
$row = $query->fetch(PDO::FETCH_ASSOC);
$ID = $row['id'];
?>

<table>
<tr>
<?php do { //horizontal looper?>
<td>
<div>id</div>          
<div>title</div>
<div>body</div>          
<div>date</div>
</td>
<?php
$row = $query->fetch(PDO::FETCH_ASSOC);
if (!isset($nested_List)) {
$nested_List= 1;
}
if (isset($row) && is_array($row) && $nested_List++%3==0) {
echo "</tr><tr>";
}
} while ($row); //end horizontal looper 
?>
</table>
<div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
<span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>
<?php
}
?>

Answer 1

您将必须对SQL查询使用OFFSET和LIMIT 。 当前，您正在使用SELECT * FROM posts order by id desc limit 6 。 那不会让您“负担更多”，因为它将始终仅获取6个最大的帖子（按其ID降序排列）。

Answer 2

你有几个问题。

当您的AJAX调用完成并且您希望加载消息消失时，您需要将其隐藏在ajax调用的成功回调中。 像这样：

$(document).on('click','.show_more',function(){
    var ID = $(this).attr('id');
    $('.show_more').hide();
    $('.loding').show();
    $.ajax({
        type:'POST',
        url:'ajax_more.php',
        data:'id='+ID,
        success:function(html){
            $('#show_more_main'+ID).remove();
            $('#posts').append(html);
            $('.loding').hide();
        }
    });
});

在您的SQL中，您没有做任何事情来选择备用帖子，因为在检查ID是否已发送之后。 你什么都不做。 更改您的SQL以选择大于它的id（如果存在）。

$postedId = (int)$_POST['id'];
$sql = "SELECT * FROM posts order by id desc WHERE id > $postedId limit 6";

您要确保对ID进行转义以防止进行任何形式的SQL注入。 因此，作为一种简单的措施，我将其转换为整数（我假设是整数）。 否则，您应该考虑对查询使用准备好的语句以防止SQL注入。 http://php.net/manual/zh/mysqli.quickstart.prepared-statements.php

Answer 3

您的SQL查询需要修复。 假设您要加载下一个6（按ID降序排列）。 为此，您应该发送某种变量，例如offset 。 然后您可以说：

 $sql = "SELECT * FROM posts ORDER BY id DESC LIMIT $offset, $end;"

其中$end = $offset + 6;

但是，在使用此功能之前，请确保检查$offset是否为数字，以防止SQL注入。 可以使用以下方法实现：

 if(i!sset($_POST["id"]) || empty($_POST["id"])){
      die("No ID value present.");
 }

 $offset = (isset($_POST['offset']) ? $_POST['offset'] : 0);
 if(!is_numeric($offset)){
      die("Abnormal input detected.");
 } else {
      // Input is numeric
      $offset = intval($offset);
 }

 $end = $offset + 6;
 $sql = "SELECT * FROM posts ORDER BY id DESC LIMIT $offset, $end;"

  /* Your code for actually querying the DB and processing results */

注意 ：我对PDO不太熟悉，但是，它应该与PDO兼容并且使用起来安全/安全。