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

私はコメントを印刷するコードがOKであるかどうかわからないんだけど：

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

私はhtmlの（）が期待すると思いますparamとしてhtmlStringを試してみることはできますかこれですか？：

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

ブラウザのコンソールにエラーがないかどうか確認できますか？

UPDATE：

この私のために働いています：コメント数

{{ 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> 

を取得する

indivisual_article.html注{{article.articlecomment_set.count}}

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を

• 欠落スクリプト
• ための変更スクリプトは、 "{" $のアヤックスに（{
• 使用すると、クエリセットする
• 変更queryset.countをGET。長さ、それは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>