Django点击点赞按钮触发页面刷新如何禁用？用Ajax实现无刷新更新点赞数

你当前的问题主要来自3处错误，按以下步骤修改即可：

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

原liked_post视图返回了重定向响应，Ajax请求接收到重定向会触发页面跳转，需要改为返回JSON格式数据：

# 顶部先导入JsonResponse
from django.http import JsonResponse

def liked_post(request,pk):
    post = get_object_or_404(UserPosts, id=request.POST.get("userposts_id"))
    liked = False
    if post.like_post.filter(id = request.user.id).exists():
        post.like_post.remove(request.user)
        liked = False
    else:
        post.like_post.add(request.user)
        liked = True
    # 返回JSON数据，不要重定向
    return JsonResponse({
        'liked': liked,
        'like_count': post.like_post.count()
    })

# 补充detail_post视图缺失的点赞总数参数
def detail_post(request,_detail):
    postDetail =  UserPosts.objects.get(pk = _detail)
    liked = False
    if postDetail.like_post.filter(id= request.user.id).exists():
        liked = True
    context= {
        "detail":postDetail,
        "liked":liked,
        # 补充点赞总数传递到模板
        "total_post_likes": postDetail.like_post.count()
    }
    return render(request,"DetailPost.html",context)

2. JS代码修改 #

原代码没有处理请求成功后的页面更新逻辑，且按钮值获取逻辑存在多实例冲突问题：

$(document).ready(function () {
    $('.like-form').submit(function (e) {
        e.preventDefault();
        // 从当前提交的表单内获取按钮值，避免全局选择冲突
        const userposts_id = $(this).find('.like-btn').val();
        const token = $(this).find('input[name=csrfmiddlewaretoken]').val();
        const url = $(this).attr('action')
        const $likeBtn = $(this).find('.like-btn')
        const $likeCount = $(this).find('.like-count')
        $.ajax({
            method: "POST",
            url: url,
            headers: { 'X-CSRFToken': token },
            data: {
                'userposts_id': userposts_id
            },
            success: function(res) {
                // 更新点赞数
                $likeCount.text(res.like_count)
                // 切换按钮样式和文本
                if(res.liked) {
                    $likeBtn.removeClass('btn-primary').addClass('btn-danger').text('Unlike')
                } else {
                    $likeBtn.removeClass('btn-danger').addClass('btn-primary').text('Like')
                }
            }
        })
    })
})

3. 模板代码修改 #

原Unlike按钮缺少like-btn类，导致JS无法选中：

<form class="btn-group  mt-1 like-form" action="{% url 'like_post' detail.pk %}" method="POST">
    {% csrf_token %}
    {% if request.user.is_authenticated %}
        {% if detail.username_id == request.user.id %}
            <button class="btn btn-primary btn-sm" disabled>Like</button>
        {% else %}
            {% if liked %}
                <!-- 给Unlike按钮添加like-btn类 -->
                <button class="btn btn-danger btn-sm like-btn" type="submit" name="userposts_id" value="{{ detail.id }}">Unlike</button>
            {% else %}
                <button class="btn btn-primary btn-sm like-btn" type="submit" name="userposts_id" value="{{ detail.id }}">Like</button>
            {% endif %}
        {% endif %}
    {% else %}
        <span class="px-2 pt-1">
                <a href="{% url 'login' %}" class="">Login</a> to like
        </span>
    {% endif %}
    <span class="bg-dark px-4 pt-1  like-count text-white"> {{total_post_likes}}</span>
</form>

修改完成后刷新页面测试即可实现无刷新点赞功能。

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