Django 使用 AJAX 加载更多评论

Question

在个人资料页面中，我想显示 post 个用户。每个 post 可能有多个评论，我不想显示 post 的所有评论而是我只想显示少数评论并添加加载更多评论选项。如果用户点击加载更多评论，那么我想显示更多评论。什么是更好的方法来做到这一点？我已经在使用 posts 分页的无限滚动。我认为这可能不适用于评论。

我的当前代码如下所示

{% for post in post_queryset %}
   <div class="title">
     {{ post.title }}
   </div>
   {% for comment in post.comments.all %}
   </div>
     {{ comment.text }}
   </div>
   {% endfor %}
{% endfor %}

以上代码是原版的简化版，让事情更简单。

Answer 1

对于动态页面内容，最好的方法是使用 jquery 和 bootstrap。

渲染模板时，可以在第10个或后面的元素中添加class "d-none"（隐藏元素的内容）：

{% for post in post_queryset %}
   <div name="comment-block">
       <div class="title">
         {{ post.title }}
       </div>
       {% for comment in post.comments.all %}
       <div {% if forloop.counter > 9 %} class="d-none" {% endif %} >
       {{ comment.text }}
       </div>
       {% endfor %}
       <button type="button" name="more_comments" class="btn btn-primary" > more comments </button>
   </div>
{% endfor %}

这样，将呈现所有评论，但只会显示前 10 个。

之后，点击按钮触发的 jquery 函数应该可以解决问题

$("[name='more_comments']".click(function(){
    var hidden_comments = $(this).parent().find('.d-none'); // selects all hidden comments
    $(hidden_comments).each(function(){$(this).removeClass('d-none')}); // removes 'd-none' class
    })

请记住，您的原始代码（无论是我的答案）都不符合 bootstrap，强烈建议这样做。您可以在 https://getbootstrap.com/.

中了解有关 bootstrap 的更多信息

Django 使用 AJAX 加载更多评论

Django load more comments with AJAX

django

django-comments

django-pagination