如何使用Django和JavaScript实现流畅的点赞取消点赞功能

实现无刷新的点赞取消点赞功能，核心是通过Django处理后端数据逻辑，JavaScript发送异步请求更新前端状态，避免整页重载带来的卡顿感。整个流程分为后端数据层、接口层、前端交互层三个部分，下面逐步展开说明。

一、后端数据模型设计

首先需要设计存储点赞数据的数据表，这里需要两个核心模型：内容模型和点赞记录模型。假设我们要对文章实现点赞功能，先定义文章模型，再定义点赞记录模型，通过外键关联文章和用户，同时设置联合唯一约束避免重复点赞。

from django.db import models
from django.contrib.auth.models import User

# 文章模型
class Article(models.Model):
    title = models.CharField(max_length=200, verbose_name="文章标题")
    content = models.TextField(verbose_name="文章内容")
    like_count = models.IntegerField(default=0, verbose_name="点赞数")
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")

    def __str__(self):
        return self.title

# 点赞记录模型
class LikeRecord(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name="点赞用户")
    article = models.ForeignKey(Article, on_delete=models.CASCADE, verbose_name="点赞文章")
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="点赞时间")

    class Meta:
        # 联合唯一约束，同一用户同一文章只能有一条点赞记录
        unique_together = ("user", "article")

二、Django后端接口开发

后端需要提供两个核心接口：一个是获取文章当前点赞状态和点赞数的查询接口，另一个是实现点赞和取消点赞的切换接口。接口使用Django的视图函数处理，返回JSON格式数据供前端调用。

2.1 查询点赞状态接口

该接口接收文章ID和用户ID，返回当前用户是否点赞过该文章，以及文章的总点赞数。

from django.http import JsonResponse
from django.views.decorators.http import require_GET
from .models import Article, LikeRecord

@require_GET
def get_like_status(request):
    article_id = request.GET.get("article_id")
    user = request.user
    if not user.is_authenticated:
        return JsonResponse({"code": 401, "msg": "请先登录"})
    try:
        article = Article.objects.get(id=article_id)
    except Article.DoesNotExist:
        return JsonResponse({"code": 404, "msg": "文章不存在"})
    # 判断是否已点赞
    is_liked = LikeRecord.objects.filter(user=user, article=article).exists()
    return JsonResponse({
        "code": 200,
        "data": {
            "is_liked": is_liked,
            "like_count": article.like_count
        }
    })

2.2 点赞切换接口

该接口处理点赞和取消点赞的切换逻辑：如果用户未点赞则创建点赞记录，文章点赞数加1；如果用户已点赞则删除点赞记录，文章点赞数减1。

from django.views.decorators.http import require_POST
from django.views.decorators.csrf import csrf_exempt
import json

@require_POST
@csrf_exempt
def toggle_like(request):
    data = json.loads(request.body)
    article_id = data.get("article_id")
    user = request.user
    if not user.is_authenticated:
        return JsonResponse({"code": 401, "msg": "请先登录"})
    try:
        article = Article.objects.get(id=article_id)
    except Article.DoesNotExist:
        return JsonResponse({"code": 404, "msg": "文章不存在"})
    # 查询是否已有点赞记录
    like_record = LikeRecord.objects.filter(user=user, article=article).first()
    if like_record:
        # 已点赞，执行取消点赞
        like_record.delete()
        article.like_count -= 1
        article.save()
        is_liked = False
    else:
        # 未点赞，执行点赞
        LikeRecord.objects.create(user=user, article=article)
        article.like_count += 1
        article.save()
        is_liked = True
    return JsonResponse({
        "code": 200,
        "data": {
            "is_liked": is_liked,
            "like_count": article.like_count
        }
    })

记得在Django的urls.py中配置这两个接口的路由，确保前端可以正常访问。

三、前端交互逻辑实现

前端部分需要使用JavaScript发送ajax请求，处理点赞按钮的点击事件，同时更新按钮样式和点赞数显示，整个过程不需要刷新页面。

3.1 页面HTML结构

页面中需要放置点赞按钮和点赞数显示元素，这里用一个简单的文章详情页示例。

<div class="article-detail">
    <h3>示例文章标题</h3>
    <p>这是文章的内容部分，这里展示文章的详细信息。</p>
    <div class="like-area">
        <button id="likeBtn" data-article-id="1">
            <span id="likeIcon">♡</span>
            <span id="likeCount">0</span>
        </button>
    </div>
</div>

3.2 JavaScript交互代码

代码分为两部分：页面加载时查询当前点赞状态，点击按钮时发送切换点赞请求并更新界面。

// 页面加载完成后初始化点赞状态
document.addEventListener("DOMContentLoaded", function() {
    const articleId = document.getElementById("likeBtn").dataset.articleId;
    // 发送请求获取点赞状态
    fetch(`/api/get_like_status/?article_id=${articleId}`, {
        method: "GET",
        headers: {
            "Content-Type": "application/json"
        },
        credentials: "include" // 携带cookie，确保用户登录状态有效
    })
    .then(response => response.json())
    .then(res => {
        if (res.code === 200) {
            updateLikeUI(res.data.is_liked, res.data.like_count);
        } else {
            alert(res.msg);
        }
    });

    // 点赞按钮点击事件
    document.getElementById("likeBtn").addEventListener("click", function() {
        const articleId = this.dataset.articleId;
        fetch("/api/toggle_like/", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                article_id: articleId
            }),
            credentials: "include"
        })
        .then(response => response.json())
        .then(res => {
            if (res.code === 200) {
                updateLikeUI(res.data.is_liked, res.data.like_count);
            } else {
                alert(res.msg);
            }
        });
    });
});

// 更新点赞按钮样式和点赞数的工具函数
function updateLikeUI(isLiked, likeCount) {
    const likeIcon = document.getElementById("likeIcon");
    const likeCountEl = document.getElementById("likeCount");
    if (isLiked) {
        likeIcon.textContent = "♥";
        likeIcon.style.color = "red";
    } else {
        likeIcon.textContent = "♡";
        likeIcon.style.color = "#999";
    }
    likeCountEl.textContent = likeCount;
}

四、优化与注意事项

在实际使用中可以对功能做进一步优化：比如添加请求防抖，避免用户快速多次点击发送重复请求；前端添加加载状态提示，提升用户体验；后端可以对接口做限流，防止恶意刷点赞数。另外需要注意用户未登录时的处理逻辑，前端可以引导用户跳转到登录页面，后端接口也要做好权限校验，避免未登录用户操作数据。

整个点赞功能的实现逻辑并不复杂，核心就是前后端通过异步请求交互，后端保证数据的一致性，前端保证交互的流畅性，按照上述步骤即可快速搭建出符合需求的点赞模块。

DjangoJavaScript点赞功能ajax修改时间：2026-07-14 11:39:43