使用ajax,php加载更多帖子

时间:2015-10-27 13:28:55

标签: javascript php jquery ajax

我在表格中显示帖子,然后尝试使用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
}
?>

3 个答案:

答案 0 :(得分:1)

您必须使用OFFSETLIMIT作为SQL查询。目前您正在使用SELECT * FROM posts order by id desc limit 6。这不会加载你更多&#34;,因为它总是只能获取6个最大的帖子(按他们的ID下降排序)。

答案 1 :(得分:1)

你有几个问题。

当您的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/en/mysqli.quickstart.prepared-statements.php

答案 2 :(得分:1)

您的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兼容并且安全/可靠使用。