使用jquery ajax在django中动态加载评论

Question

我想在用户点击相应的评论链接时加载特定文章的所有评论。我想用Jquery Ajax来做到这一点，而不刷新页面，但无法实现我的动机。我在这里分享了我的想法。如果这不是相关的方法，请给我建议另一种方法。

     
 
         
 
//articles/all_articles.html 
 

 
<div class="infinite-container"> 
 
    <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> 
 
    {% for article in all_articles %} 
 
    <div class="infinite-item"> 
 
     <ul id="posts_ul"> 
 
    {% include 'articles/indivisual_article.html' with article=article %} 
 
     </ul> 
 
    </div> 
 
    {% endfor %} 
 
</div> 
 

 
//articles/indivisual_articles.html 
 

 
<a href="#" style="text-decoration: none;" class="comment" id="allcomments" value="{{article.id}}"> 
 
<span class="glyphicon glyphicon-comment"></span> 
 
{% trans 'Comment' %} 
 
(<span class="comment-count">{{article.comments }}</span>) 
 
</a><br> 
 
<ol class="clearfix"> 
 
{% comment %} 
 
Place holder to load feed comments {% endcomment %} 
 
</ol>

<scripts type='text/javascript'> $('#allcomments').on("click",function(){ 
 
    var myvar= $(this).attr("value"); 
 
    var $el1= $(this); 
 
    var $p1= $el1.parent(); 
 
    var $list= $p1.find(".clearfix"); 
 
     $.ajax(
 
     url: '/articles/comment/', 
 
     type: 'POST', 
 
     data:{post_id: myvar}, 
 
     dataType:'json', 
 
     success: function(response) { 
 
     queryset= .parseJSON(response); 
 
      for(i=0; i<(queryset.count); i++){ 
 
         value=response[i].comment 
 
         $list.html(<li>"{{value}}"= + value</li>).load()   
 
        }); 
 
         
 
         
 
    }); 
 
    
 
</scripts>

//views.py 
 

 
@login_required  
 
def comment(request): 
 
    if request.is_ajax(): 
 
     article_id= request.POST.get('post_id') 
 
     article = Article.objects.get(id=article_id) 
 
     comment=ArticleComment.objects.filter(post=article) 
 
     response=serializers.serialize('json', list(comment), fields=('comment')) 
 
     
 
     return HttpResponse(response, mimetype='application/json') 
 
     
 
//models.py 
 

 
class Article(models.Model): 
 
    title=models.CharField(max_length=250) 
 
    post=models.TextField(max_length=4000) 
 
    create_user=models.ForeignKey(User) 
 
    
 

 
class ArticleComment(models.Model): 
 
    post = models.ForeignKey(Article) 
 
    comment=models.CharField(max_length=500) 
 
    date = models.DateTimeField(auto_now_add=True) 
 
    user = models.ForeignKey(User)  
 
    
 
//urls.py 
 

 
urlpatterns= [url(r'^articles/comment/$', views.comment, name='art_comment'),] 
 

Answer 1

我不知道，如果打印的注释是确定的代码：

$list.html(<li>"{{value}}"= + value</li>).load() 

我认为HTML（）预期htmlString作为参数，你可以试试这个？：

$list.html("<li>" + value + "</li>") 

你可以检查浏览器控制台是否有错误吗？

UPDATE：

这的工作对我来说：

indivisual_article.html

注意{{article.articlecomment_set.count}}获得的评论数

{{ article.title }} 
<a href="#" style="text-decoration: none;" class="comment" id="allcomments" value="{{article.id}}"> 
    <span class="glyphicon glyphicon-comment"></span> 
    (<span class="comment-count">{{article.articlecomment_set.count }}</span>) 
</a> 
<br> 

<ol class="clearfix"> 
    {% comment %} 
     Place holder to load feed comments 
    {% endcomment %} 
</ol> 

view.py

我已经使用JsonResponse和GET方法。

def comment(request): 
    if request.is_ajax(): 
     article_id = request.GET.get('post_id') 
     article = Article.objects.get(id=article_id) 
     comments = ArticleComment.objects.filter(post=article) 
     response = serializers.serialize('json', comments), 
     return JsonResponse(response, safe=False) 

的Javascript

• 改变脚本的脚本
• 缺少 “{” 在$阿贾克斯（{
• 使用GET
• 变化queryset.count来查询集。长度，这是一个js阵列
• 然后，你必须得到查询集注释名称：查询集[I] .fields.comment

你可以试试这个：

<script type='text/javascript'> 
    $('#allcomments').on("click",function(){ 
     var myvar= $(this).attr("value"); 
     var $el1= $(this); 
     var $p1= $el1.parent(); 
     var $list= $p1.find(".clearfix"); 
     $.ajax({ 
      url: '/articles/comment/', 
      type: 'GET', 
      data:{post_id: myvar}, 
      dataType:'json', 
      success: function(response) { 
       queryset= JSON.parse(response); 
       var comment_list = ''; 
       for(i=0; i<queryset.length; i++){ 
        comment_list = comment_list + "<li>"+queryset[i].fields.comment+"</li>"; 
       } 
       $list.html(comment_list) 
      } 
     }); 
    }); 

</script>