Question

我想做什么？

我试图在没有页面刷新的情况下发布评论。

有什么问题？

我能够成功发布评论，但如果没有页面刷新，我就无法显示。

我的代码： -

HTML

// This is where you can write a comment.
<form id='articleCommentForm'>{% csrf_token %}
   <textarea placeholder='write comment'></textarea>
   <button type="submit"> Comment </button>
</form>

// This is where previous comments get displayed
{% for comment in comments %}       
<br /> <br />
<div class="row" class="commentStyle">                  
  <div class="col-xs-10">
    <span class="userName"> {{ comment.user }} </span>
    <br /> <br />
    <div class="comment-box">
        <textarea class="form-control" readonly> {{ comment.text }} </textarea>
    </div>                      
    <br />
    <div class="row">
        <div class="col-xs-6">
            <span class="comment-footer-text"> {{ comment.date }} </span>
        </div>
        <div>
            <div class="comment-control">
                <span> {{ comment.likes }} </span>
                <span></span>
            </div>                                      
        </div>
    </div>                      
  </div>
</div>
{% endfor %}

AJAX

$('#articleCommentForm').on('submit',function(e){
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '/articles/postComment/',
    data: {
       'comment': $('#articleCommentForm textarea').val(),
       csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
    },
    dataType: 'json',
    success: function(data){
       var comment = JSON.parse(data['comment']);           
       $('.commentStyle .userName').val(comment.user);
       $('.commentStyle textarea').val(comment.text);
       $('.commentStyle .comment-footer-text').val(comment.date);
       $('.commentStyle .comment-control span:first-child').val(comment.likes);        
   }
  });
)};

views.py

def postComment(request):
    if request.user.is_authenticated():         
       comment = Comment()
       comment.user = request.user
       comment.text = request.POST.get('comment')
       comment.date = datetime.now()    
       comment.save()       
       curComment = serializers.serialize('json', [comment])    
       data['comment'] = curComment
    return JsonResponse(data)

任何帮助都将受到高度赞赏。

Answer 1

对于此功能，我们应该使用一个新的部分模板来呈现注释并返回呈现的html以添加到HTML DOM中。

<强> single_comment.html

  <div class="col-xs-10">
    <span class="userName"> {{ comment.user }} </span>
    <br /> <br />
    <div class="comment-box">
        <textarea class="form-control" readonly> {{ comment.text }} </textarea>
    </div>                      
    <br />
    <div class="row">
        <div class="col-xs-6">
            <span class="comment-footer-text"> {{ comment.date }} </span>
        </div>
        <div>
            <div class="comment-control">
                <span> {{ comment.likes }} </span>
                <span></span>
            </div>                                      
        </div>
    </div>                      
  </div>

<强> views.py

from django.shortcuts import render

def postComment(request):
    if request.user.is_authenticated():         
       comment = Comment()
       comment.user = request.user
       comment.text = request.POST.get('comment')
       comment.date = datetime.now()    
       comment.save()       
    return render(request, 'partial/comment.html', {'comment': comment})

<强> AJAX

$.ajax({
    type: 'POST',
    url: '/articles/postComment/',
    data: {
       'comment': $('#articleCommentForm textarea').val(),
       csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
    },
    dataType: 'json',
    success: function(data){
         $('.commentStyle').append(data)     
   }
});

如何在django中没有页面刷新的情况下发布评论后显示评论？

1 个答案: