如何在Django中实现无需刷新页面的评论功能

要实现无刷新评论，核心是用AJAX异步提交表单，后端返回JSON数据，前端动态渲染新评论，而非通过重定向刷新页面。以下是针对你现有代码的修改步骤：

一、修改后端视图（views.py） #

把原来的重定向返回改成JSON响应，返回新评论的信息和最新评论数：

from django.http import JsonResponse

def addComment(request):
    if request.method == 'POST':
        post_id = request.POST['contentId']
        title = request.POST['title']
        description = request.POST['description']
        user = request.session['user']['id']
        user_name = request.session['user']['name']
        
        con = Comment(
            post_id=post_id,
            title=title,
            description=description,
            visitor_id=user,
        )
        con.save()
        
        # 返回新评论数据和最新计数
        return JsonResponse({
            'success': True,
            'comment': {
                'title': title,
                'name': user_name,
                'description': description
            },
            'new_count': Comment.objects.filter(post_id=post_id).count()
        })
    return JsonResponse({'success': False})

二、调整前端HTML结构 #

给评论列表添加一个容器，方便后续插入新评论：

<div class="col-4">
  <h4 class="m-3">{{comments.count}} Comments...</h4>
  <!-- 新增card-container容器 -->
  <div class="card-container">
    {% for j in comments %}
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">{{j.title}}</h5>
        <h6 class="card-subtitle mb-2 text-muted">{{j.visitor.name}}</h6>
        <p class="card-text">{{j.description}}</p>
      </div>
    </div>
    {% endfor %}
  </div>
  <hr>
  <h3>Comment here</h3>
  <form method="post" id="comment-form">
    {% csrf_token %}
    <input type="hidden" id="contentId" name='contentId' value="{{ result.id }}">
    <div class="form-group">
      <input type="hidden" id="name" name="name" class="form-control" value="{{request.session.user.name}}" readonly>
    </div>
    <div class="form-group">
      <label for="title">Title</label>
      <input type="text" id="title" name="title" class="form-control">
    </div>
    <div class="form-group">
      <label for="description">Description</label>
      <textarea name="description" id="description" cols="30" rows="5" class="form-control"></textarea>
    </div>
    <button type="submit" class="btn btn-secondary">Submit</button>
  </form>
</div>

三、添加前端AJAX处理脚本 #

在页面底部（或</body>标签前）添加JavaScript，监听表单提交事件，异步发送请求并渲染新评论：

<script>
const commentForm = document.getElementById('comment-form');
const commentContainer = document.querySelector('.card-container');
const commentCountEl = document.querySelector('h4.m-3');

commentForm.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交，避免页面刷新
    
    const formData = new FormData(this);
    
    // 注意替换成你urls.py中addComment对应的URL名称
    fetch('{% url "addComment" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            // 清空表单
            commentForm.reset();
            
            // 更新评论计数
            commentCountEl.textContent = `${data.new_count} Comments...`;
            
            // 构建新评论卡片HTML
            const newCard = `
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">${data.comment.title}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">${data.comment.name}</h6>
                        <p class="card-text">${data.comment.description}</p>
                    </div>
                </div>
            `;
            
            // 将新评论插入到列表顶部（也可用appendChild放到底部）
            commentContainer.insertAdjacentHTML('afterbegin', newCard);
        } else {
            alert('评论提交失败，请重试');
        }
    })
    .catch(err => {
        console.error('提交出错:', err);
        alert('提交过程中出现错误');
    });
});
</script>

四、补充URL配置 #

确保你的urls.py中给addComment视图配置了正确的URL名称：

from django.urls import path
from . import views

urlpatterns = [
    # 其他URL...
    path('add-comment/', views.addComment, name='addComment'),
]

内容的提问来源于stack exchange，提问作者Karamjeet Singh