通过 ajax 提交评论后，无法在不刷新页面的情况下重新加载所有评论答案

【问题标题】：Can't get all comments to reload without page refresh after comment submitted thourgh ajax通过 ajax 提交评论后，无法在不刷新页面的情况下重新加载所有评论
【发布时间】：2017-06-12 14:02:54
【问题描述】：

我一直在尝试提出一个方案，当用户发布包含刚刚发布的评论的 cmets 时，cmets 部分会在模板中刷新。页面不得刷新。

抱歉缩进。

模板-

     {% 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 文件是 -

     $(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)
                 }
             })
         });
     });

最后我的看法是——

    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

几个问题-

我想通过 ajax 返回一个 Comments 查询集（如果我可以将查询集发送到模板，则看不到将其 json 化的意义。）
视图中的 cmets_div 未拾取我返回到模板的查询集。

我是新手，所以请逐步解释我做错了什么。谢谢。

【问题讨论】：

适用于遇到类似情况的人。 this link helped me

标签： ajax django

【解决方案1】：

您在响应中发回 JSON 并执行$(".comments_div").html(reply)。您必须发回以all_comments 呈现的模板作为对成功评论的响应。此外，据我所知，查询集不是 JSON 可序列化的。

【讨论】：