无限滚动 - 获取动态更新内容的 Div ID答案

【问题标题】：Infinite Scrolling - Get the Div ID of Dynamically Updated Content无限滚动 - 获取动态更新内容的 Div ID
【发布时间】：2013-03-05 15:35:29
【问题描述】：

所以我正在为我的博客创建无限滚动。它应该在滚动后基本上拉出一个帖子。我正在通过 Ajax 实现它。问题是，Ajax 发布的 post_id 与我在滚动一次后得到的相同。我用萤火虫调试它。例如：已经有一个post-id = 10的帖子。我滚动后，它会附加下一个post-id = 11的帖子。但在那之后滚动，它只会附加post-id = 11的帖子，它不会附加 post-id = 12 的帖子，依此类推。问题是什么？这个 (Posted:last) 选择器有问题吗？如何获取上次动态更新内容的 id？

这是我的 Index.php：

<?php
include 'resources/init.php';

function get_posts($post_id = null, $tag_id = null){
    $posts = array();
    $query = "SELECT `posts`.`post_id` AS `posts_id`, `tags`.`tag_id` AS `tags_id`,
                        `title`, `txt_content`, `img_content`, `date_posted`,`tag_name`
                        FROM `posts`
                        INNER JOIN `tags` ON `tags`.`tag_id` = `posts`.`tag_id`";

    if(isset($post_id)){
        $post_id = (int)$post_id;
        $query .= " WHERE `posts`.`post_id` = $post_id";

    }
    if(isset($tag_id)){
        $tag_id = (int)$tag_id;
        $query .= " WHERE `tags`.`tag_id` = $tag_id";

    }

    $query .= " ORDER BY `posts`.`post_id` DESC LIMIT 0,1";

    $query = mysql_query($query);
    while($row = mysql_fetch_assoc($query)){
        $posts[] = $row;
    }
    return $posts;
}

$posts = (isset($_GET['post_id'])) ? get_posts($_GET['post_id']) : get_posts();
?>
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<a href = "http://localhost/simpleblog/add_post.php">Add a Post</a> | <a href = "http://localhost/simpleblog/add_tag.php">Add a Tag</a> | <a href = "http://localhost/simpleblog/tag_list.php">Show Existing Tags</a> | <a href = ""></a>
<p>
<div id = "AddPosts">
<?php
foreach($posts as $post){
?>
    <div class = "Posted" id = "<?php echo $post['posts_id']; ?>">
    <h2><a href = "http://localhost/simpleblog/looks/<?php echo $post['posts_id']; ?>-<?php $strings = array(" "); echo str_replace($strings, '-', preg_replace('/[^a-zA-Z0-9 s]/', '', $post['title'])); ?>"><?php echo $post['title'];?></a></h2>
    <div><?php echo nl2br($post['txt_content']);?></div>
    <div><img src = "http://localhost/simpleblog/<?php echo $post['img_content'];?>"></div>
        <p>Posted on <i><?php echo date("F dS\,\ Y", strtotime($post['date_posted'])); ?></i>
         in <a href = "http://localhost/simpleblog/tags/<?php echo $post['tags_id'];?>"><?php echo $post['tag_name']; ?></a></p>
         <div><a href = "http://localhost/simpleblog/edit_my_looks/<?php echo $post['posts_id'];?>">Edit This Post</a> |
        <a href = "http://localhost/simpleblog/delte_my_post/<?php echo $post['posts_id'];?>"> Delete This Post</a></div>
    </div>
<?php
}
?>
</div>
<center><img src = "loader.gif" id = "loading-img" width = "200" height = "200" style = "display:none" /></center>
<script>
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
        $('#loading-img').show();

        var post_id = $('.Posted:last').attr('id');
        $.post("add_more_posts.php", {post_id: post_id} , function(data){
            if(data){
                $('#loading-img').fadeOut();
                $('#AddPosts').append(data);
            }else{
                $('#AddPosts').append('Finished Loading!');
            }
        });
    }
});
</script>
</body>
</html>

添加_more_posts.php

<?php
include 'resources/init.php';

function load_more_posts($post_id = null, $tag_id = null){
    $posts = array();
    $query = "SELECT `posts`.`post_id` AS `posts_id`, `tags`.`tag_id` AS `tags_id`,
                        `title`, `txt_content`, `img_content`, `date_posted`,`tag_name`
                        FROM `posts`
                        INNER JOIN `tags` ON `tags`.`tag_id` = `posts`.`tag_id`";

    if(isset($post_id)){
        $post_id = (int)$_POST['post_id'];
        $query .= " WHERE `posts`.`post_id` < $post_id";

    }
    if(isset($tag_id)){
        $tag_id = (int)$tag_id;
        $query .= " WHERE `tags`.`tag_id` = $tag_id";

    }

    $query .= " ORDER BY `posts`.`post_id` DESC LIMIT 0,1";

    $query = mysql_query($query);
    while($row = mysql_fetch_assoc($query)){
        $posts[] = $row;
    }
    return $posts;
}

$posts = (isset($_POST['post_id'])) ? load_more_posts($_POST['post_id']) : load_more_posts();
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
foreach($posts as $post){
?>
    <h2><a href = "http://localhost/simpleblog/looks/<?php echo $post['posts_id']; ?>-<?php $strings = array(" "); echo str_replace($strings, '-', preg_replace('/[^a-zA-Z0-9 s]/', '', $post['title'])); ?>"><?php echo $post['title'];?></a></h2>
    <div><?php echo nl2br($post['txt_content']);?></div>
    <div><img src = "http://localhost/simpleblog/<?php echo $post['img_content'];?>"></div>
        <p>Posted on <i><?php echo date("F dS\,\ Y", strtotime($post['date_posted'])); ?></i>
         in <a href = "http://localhost/simpleblog/tags/<?php echo $post['tags_id'];?>"><?php echo $post['tag_name']; ?></a></p>
         <div><a href = "http://localhost/simpleblog/edit_my_looks/<?php echo $post['posts_id'];?>">Edit This Post</a> |
        <a href = "http://localhost/simpleblog/delte_my_post/<?php echo $post['posts_id'];?>"> Delete This Post</a></div>
<?php
}
?>
</body>
</html>

【问题讨论】：

Please, don't use mysql_* functions in new code。它们不再维护and are officially deprecated。看到red box？改为了解prepared statements，并使用PDO 或MySQLi - this article 将帮助您决定哪个。如果你选择 PDO，here is a good tutorial.

标签： php jquery html

【解决方案1】：

好的，这里是为什么它可能不起作用的一个想法。

在 ajax 站点上，跟踪获取的 id 可能存在问题。如果您要获取 id=12 的记录。你是如何记录这个记录的？所以你的问题可能是 ajax 一遍又一遍地向服务器发送相同的 id，这就是它不获取下一条记录的原因。

你可以在javascript中创建静态变量

function static_vars(){
    this.id=0;
}

以后你可以从任何函数调用它

static_vars.id

因此，一旦您获取记录 12，请将 static_vars.id 更新为 13，并将 id 发送到服务器以获取记录 13。

仅当您从服务器获得成功响应时才增加 static_vars.id。

【讨论】：

是的，Ajax 正在一遍又一遍地发送相同的 ID！但是等等，我不明白我将如何在这段代码中实现？请帮忙，谢谢！
好吧，我来帮你，你必须告诉我你在客户端的方法（jquery/javascript）？您如何在客户端跟踪记录 ID 或页面索引？
我真的不知道，我认为这会起作用。我从这里学到了这种分页技术：youtube.com/watch?v=LNWWKfBtysk
它在他的视频中有效，只是在我的视频中无效。而且我认为他不会跟踪 post_ids。
如果你正在获取一条记录，那么你不需要学习分页。在客户端，只需发送要从服务器获取的记录的 ID，例如。您想通过 ajax 从服务器获取记录 6。收到响应后，在客户端将此 id 更新为 7，依此类推。但是，如果您不知道如何做这些事情，那么我建议您提高自己的技能。你需要为你的问题开发一个合适的算法。