如何通过Ajax更新Django项目中被点击的点赞按钮状态

嘿，我来帮你搞定这个问题！你现在的核心痛点是Ajax成功后没有定位到被点击的单个按钮，而是直接操作了所有.comment类的元素，所以才会出现批量更新的情况。咱们一步步来修正：

关键问题分析 #

你已经把buttonid传给了后端，也能在success回调里拿到它，但更简单高效的方式是在点击事件一开始就保存当前按钮的DOM引用——因为Ajax是异步操作，到success回调执行时，this的上下文已经发生变化，直接用$(this)会找不到原来的按钮。

具体修改步骤 #

1. 保存被点击按钮的引用 #

在点击事件触发时，先把当前按钮存成变量，后续操作都基于这个变量：

$('.comment').click(function() {
    var $clickedBtn = $(this); // 保存当前按钮的引用，这是关键！
    var surveyid = $clickedBtn.attr('data-surveyid');
    var commentliked = $clickedBtn.attr('data-commentliked');
    var buttonid = $clickedBtn.attr('id');
    
    // 后续Ajax代码不变，重点修改success部分
});

2. 在Ajax Success里仅操作目标按钮 #

不要用$(".comment")选中所有按钮，而是用刚才保存的$clickedBtn来单独操作。同时根据后端返回的更新后的commentliked状态，切换按钮的样式、图标和data属性：

success: function (data) {
    // 切换按钮的样式类
    $clickedBtn.removeClass('btn-primary btn-success')
               .addClass(data.commentliked === 'True' ? 'btn-success' : 'btn-primary');
    
    // 切换星星图标
    var $icon = $clickedBtn.find('.glyphicon');
    $icon.removeClass('glyphicon-star-empty glyphicon-star')
         .addClass(data.commentliked === 'True' ? 'glyphicon-star' : 'glyphicon-star-empty');
    
    // 更新data-commentliked属性，方便下次点击时判断状态
    $clickedBtn.attr('data-commentliked', data.commentliked === 'True' ? 'False' : 'True');
}

3. 后端需要返回更新后的状态 #

确保你的Django视图函数返回的JSON里包含更新后的commentliked状态，这样前端才能正确切换按钮状态：

# 示例Django视图逻辑
def validate_username(request):
    surveyid = request.GET.get('surveyid')
    commentliked = request.GET.get('commentliked')
    buttonid = request.GET.get('buttonid')
    
    # 执行数据库更新逻辑：切换点赞状态
    comment = Comment.objects.get(id=surveyid)
    comment.comment_liked = not (commentliked == 'True')
    comment.save()
    
    # 返回更新后的状态和按钮ID
    return JsonResponse({
        'buttonid': buttonid,
        'commentliked': str(comment.comment_liked)  # 转成字符串方便前端判断
    })

修改后的完整JavaScript代码 #

{% block javascript %}
<script type="text/javascript">
$(function() {
    $('.comment').click(function() {
        var $clickedBtn = $(this);
        var surveyid = $clickedBtn.attr('data-surveyid');
        var commentliked = $clickedBtn.attr('data-commentliked');
        var buttonid = $clickedBtn.attr('id');

        $.ajax({
            url: '/evaluations/validate_username/',
            data: {
                'surveyid': surveyid,
                'commentliked': commentliked,
                'buttonid': buttonid
            },
            dataType: 'json',
            type: 'get',
            success: function (data) {
                // 更新按钮样式
                $clickedBtn.removeClass('btn-primary btn-success')
                           .addClass(data.commentliked === 'True' ? 'btn-success' : 'btn-primary');
                
                // 更新星星图标
                var $icon = $clickedBtn.find('.glyphicon');
                $icon.removeClass('glyphicon-star-empty glyphicon-star')
                     .addClass(data.commentliked === 'True' ? 'glyphicon-star' : 'glyphicon-star-empty');
                
                // 更新data属性，为下次点击做准备
                $clickedBtn.attr('data-commentliked', data.commentliked === 'True' ? 'False' : 'True');
            }
        });
    });
});
</script>
{% endblock %}

这样修改后，每次点击点赞按钮时，就只会更新当前被点击的按钮状态，不会影响页面上的其他按钮啦！

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