Question

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

抱歉缩进。

模板 -

     {% 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返回一个评论查询集（如果我可以将查询集发送到模板，请不要在jsonifying中查看点。）
我返回模板的查询集未被视图中的comments_div选中。

我是菜鸟，所以请逐步解释我做错了什么。感谢。

Answer 1

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

在评论提交了thourgh ajax之后，无法在没有页面刷新的情况下重新加载所有评论

1 个答案: