使用jQuery实现点赞/取消点赞按钮：刷新后状态异常求助

你的问题很典型——当前的代码只做了前端DOM的本地切换，没有把点赞/取消点赞的状态同步到后端数据库里。所以刷新页面后，后端会重新根据数据库里的原始状态渲染按钮文本，自然就和你之前前端修改的状态不一致了。

下面是完整的解决方案，分前端和后端两部分来调整：

1. 修正前端初始渲染的状态 #

首先要让按钮的初始类和文本对应，这样前端初始状态就和后端数据库一致：

<span class="like-button {% if request.user in likes.all %}liked{% endif %}">
  {% if request.user in likes.all %}Unlike{% else %}Like{% endif %}
</span>

这里给已点赞的按钮额外加一个liked类，方便后续JS判断状态。

2. 改进jQuery代码，加入后端同步 #

点击按钮时，不再只是本地修改文本，而是通过AJAX把请求发送给后端，让后端处理数据库的点赞记录，再根据后端返回的结果更新前端状态：

$('.like-button').click(function(){
  const $button = $(this);
  
  // 发送AJAX请求到后端接口
  $.ajax({
    url: '/toggle-like/', // 替换成你实际的后端接口地址
    method: 'POST',
    data: {
      post_id: {{ post.id }}, // 传递被点赞对象的ID，比如文章ID，根据你的业务调整
      csrfmiddlewaretoken: '{{ csrf_token }}' // Django框架需要这个CSRF令牌，其他框架对应调整
    },
    success: function(response) {
      // 根据后端返回的状态更新按钮
      if (response.liked) {
        $button.addClass('liked').text('Unlike');
      } else {
        $button.removeClass('liked').text('Like');
      }
    },
    error: function() {
      // 处理请求失败的情况
      alert('操作失败，请稍后重试');
    }
  });
});

3. 后端接口实现（以Django为例） #

你需要写一个后端接口来处理点赞/取消点赞的逻辑，更新数据库中的点赞记录，然后返回当前的点赞状态：

from django.http import JsonResponse
from django.contrib.auth.decorators import login_required
from .models import Post # 替换成你的模型类

@login_required
def toggle_like(request):
    if request.method == 'POST':
        post_id = request.POST.get('post_id')
        try:
            post = Post.objects.get(id=post_id)
            user = request.user
            liked = False
            
            # 判断用户是否已经点赞，添加或移除
            if user in post.likes.all():
                post.likes.remove(user)
            else:
                post.likes.add(user)
                liked = True
                
            return JsonResponse({'liked': liked})
        except Post.DoesNotExist:
            return JsonResponse({'error': '对象不存在'}, status=404)
    return JsonResponse({'error': '无效请求'}, status=400)

为什么这样能解决问题？ #

之前的代码只修改了浏览器里的DOM内容，没有改变数据库里的实际点赞状态。刷新页面时，后端会重新从数据库读取状态并渲染按钮，所以会回到初始状态。

现在通过AJAX把操作同步到数据库，刷新后后端渲染的就是最新的点赞状态，按钮文本和类就会和用户操作后的状态一致了。

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