Django+jQuery Ajax单页多帖子评论重复及空提交问题求助

问题描述 #

在Django中使用jQuery Ajax实现单页多帖子评论功能时遇到两个核心问题：

1. 评论第一个帖子可正常提交至数据库，但评论第二个帖子时，新评论会重复显示到第一个帖子的评论区；
2. 刷新页面后评论其他帖子，会向数据库提交空内容。

问题原因分析 #

1. 评论容器ID重复：所有帖子的评论容器都使用了相同的id="menu"，jQuery选择器$('#menu')只会匹配页面中第一个该ID的元素，导致新评论全部追加到第一个帖子下。
2. 输入框选择错误：Ajax代码中用$('#comment').val()获取评论内容，但实际输入框的ID是comment-{{post.id}}（带帖子ID后缀），无法匹配到对应输入框，导致获取空值。
3. 视图函数不严谨：使用GET请求提交评论（不安全且易被缓存），未处理参数缺失、帖子不存在、非GET请求等异常场景，非GET请求时会因create_comment变量未定义抛出错误。
4. 前端逻辑错误：错误用按钮jQuery对象包裹评论文本，导致HTML构造异常；未清空输入框，用户体验差。

解决方法 #

1. 修复视图函数 #

改用POST请求提交评论，增加参数校验、异常处理，返回动态数据供前端渲染：

from django.http import JsonResponse
from django.contrib.auth.decorators import login_required
from .models import Post, Comment

@login_required
def feedComment(request):
    if request.method == 'POST':
        post_id = request.POST.get('id')
        comment_text = request.POST.get('comment_text').strip()
        
        # 参数校验
        if not post_id or not comment_text:
            return JsonResponse({'comment': None, 'error': '请输入评论内容'})
            
        try:
            post_obj = Post.objects.get(id=post_id)
            create_comment = Comment.objects.create(
                post=post_obj, 
                username=request.user, 
                comment=comment_text
            )
            # 返回前端需要的动态数据
            return JsonResponse({
                'comment': create_comment.comment,
                'user_image': request.user.profile_image.url,
                'timesince': create_comment.comment_date.timesince()
            })
        except Post.DoesNotExist:
            return JsonResponse({'comment': None, 'error': '该帖子不存在'})
    return JsonResponse({'comment': None, 'error': '请求方法错误'})

2. 修复Ajax函数 #

匹配对应帖子的输入框和评论容器，增加CSRF令牌（Django POST请求必填），优化错误处理：

<script type="text/javascript">
    function ajax($btn) {
        var postId = $btn.attr("id");
        // 匹配当前帖子的评论容器和输入框
        var $commentContainer = $('#menu-' + postId);
        var commentText = $('#comment-' + postId).val().trim();
        
        // 前置校验输入内容
        if (!commentText) {
            alert('请输入评论内容');
            return;
        }
    
        $.ajax({
            method: "POST",
            url: '{% url "feed:addcomment" %}',
            dataType: "json",
            // 携带CSRF令牌
            headers: {
                'X-CSRFToken': $('input[name="csrfmiddlewaretoken"]').val()
            },
            data: {
                comment_text: commentText,
                id: postId,
            },
            success: function (data) {
                if(data.comment)
                {
                    // 用模板字符串构造评论HTML
                    var div_html = `
                        <div class="flex">
                            <div class="w-10 h-10 rounded-full relative flex-shrink-0">
                                <img src="${data.user_image}" alt="" class="absolute h-full rounded-full w-full">
                            </div>
                            <div class="text-gray-700 py-2 px-3 rounded-md bg-gray-100 relative lg:ml-5 ml-2 lg:mr-12 dark:bg-gray-800 dark:text-gray-100">
                                <p class="leading-6">${data.comment}</p>
                                <span>${data.timesince}前</span>
                                <div class="absolute w-3 h-3 top-3 -left-1 bg-gray-100 transform rotate-45 dark:bg-gray-800"></div>
                            </div>
                        </div>
                    `;
                    // 将新评论追加到当前帖子的评论区
                    $commentContainer.prepend(div_html);
                    // 清空输入框
                    $('#comment-' + postId).val('');
                } else {
                    alert(data.error || '评论失败，请重试');
                }
            },
            error: function() {
                alert('网络错误，请稍后重试');
            }
        });
    }
</script>

3. 修复模板代码 #

给每个帖子的评论容器设置唯一ID，修复HTML结构，增加CSRF令牌：

<!-- 每个帖子的评论容器，使用唯一ID -->
<div class="border-t py-4 space-y-4 dark:border-gray-600" id="menu-{{post.id}}">
  {% for comment in post.comments.all %}
    <div class="flex">
        <div class="w-10 h-10 rounded-full relative flex-shrink-0">
            <img src="{{comment.username.profile_image.url}}" alt="{{comment.username.username}}" class="absolute h-full rounded-full w-full">
        </div>
        <div class="text-gray-700 py-2 px-3 rounded-md bg-gray-100 relative lg:ml-5 ml-2 lg:mr-12 dark:bg-gray-800 dark:text-gray-100">
            <p class="leading-6"> {{comment.comment}} <i class="uil-grin-tongue-wink-alt"></i> </p>
            <span> {{ comment.comment_date|timesince }} 前 </span>
            <div class="absolute w-3 h-3 top-3 -left-1 bg-gray-100 transform rotate-45 dark:bg-gray-800"></div>
        </div>
    </div>
  {% endfor %} 
</div>

<!-- 评论输入区域 -->
<div class="flex items-center mt-2">
    <!-- Django POST请求必填的CSRF令牌 -->
    {% csrf_token %}
    <input placeholder="Add your Comment.." id="comment-{{post.id}}" name="comment" class="bg-transparent max-h-10 shadow-none px-5 flex-1">
    <input class="material-icons" id="{{post.id}}" type="button" value="Comment" onclick="ajax($(this));return false;">
</div>

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