コメント投稿後にページを更新することなく、すべてのコメントを再読み込みすることはできませんthourgh ajax

Question

投稿されたばかりのコメントが投稿されたときにコメントセクションがテンプレート内で更新されるようになっています含まれています。ページをリフレッシュしてはいけません。

インデントして申し訳ありません。

テンプレート -

 $(document).ready(function() { 
     $('#btnSubmit').click(function(e) { 
      e.preventDefault(); 
      var data = new FormData(); 
      var comment = $('#posted_comment').val() 
      var meme_char_id = $(".meme_char_id").attr('meme_char_id') 
      data.append('comment', comment); 
      data.append('meme_char_id', meme_char_id); 
      $.ajax({ 
       type: 'POST', 
       url: '<mydomain>/comment/', 
       data: data, 
       processData: false, 
       contentType: false, 
       success: function(reply) { 
        $(".comments_div").html(reply) 
       } 
      }) 
     }); 
    }); 

そして最後に私の見解がある - -

 {% extends "home/header.html" %} 

    {% block content %} 

    {% if request.user.is_authenticated %} 

    <form> 
    {% csrf_token %} 
    <p>Comment: </p><input type="text" name="fname" id="posted_comment"> 
    <input type="hidden" class='meme_char_id' meme_char_id={{meme.meme_char_id}}> 
    <input type="submit" id ="btnSubmit" name="submit" value="Post"> 
    </form> 

    <!-- displaying comments here --> 
    <div class="box" id="comments_div"> 
     <h3 class="h4">{{comment_count}} comments </h4> 
      <ul class="list-group"> 
      {% for comment in all_comments %} 
      <h5>{{ comment.commentby.username }} : </h5> 
      <li class="list-group-item list-group-item-success">{{ comment.comment_text }}</li> 
      {% endfor %} 
      </ul> 
    </div> 

    {% endif %} 

    {% endblock %} 

さて、私のJSファイルがある

def comment(request): 

    if request.is_ajax(): 
    comment = request.POST['comment'] 
    meme_char_id = request.POST['meme_char_id'] 
    this_meme = Memes.objects.get(meme_char_id=meme_char_id) 
    print "comment - ", comment, " meme_char_id - ", meme_char_id 
    new_comment = Comments(comment_text=comment, meme_id=this_meme.meme_id, commentby_id=request.user.id) 
    new_comment.save() 
    all_comments = Comments.objects.filter(meme_id=this_meme.meme_id).order_by('-created_at').values() 
    return HttpResponse(all_comments, content_type='application/json') 
else: 
    raise Http404 

カップルの質問 -

1. 私はテンプレートのISN」に戻っていますクエリセット

2. （私はテンプレートに設定されたクエリを送信することができれば、それをjsonifyingのポイントが表示されません。）AJAXを介して設定コメントクエリを返すようにしたいですビュー内のcomments_divによって選択されています。

私は新人ですので、私が間違っていることを段階的に説明してください。ありがとう。

Answer 1

応答でJSONを返信し、$(".comments_div").html(reply)を送信しています。コメントが成功すると、all_commentsでレンダリングされたテンプレートを返信する必要があります。また、私が理解している限り、クエリーセットはJSONシリアライズ可能ではありません。