Django+Ajax实现href链接触发点赞更新 代码运行问题求助

现存代码问题 #

• 前端JS存在多处语法错误：success回调函数漏写参数位置的闭合括号，事件绑定、Ajax配置项的括号、逗号位置错误，脚本直接无法解析执行。
• 路由反向解析错误：后端feedlikes视图要求传入feed_id参数，前端{% url "feedlikes" %}未传参，无法生成正确请求地址，直接报模板语法错误。
• 请求方法不符合规范：点赞是数据修改操作，用GET请求既不符合HTTP语义，也容易被爬虫、缓存机制导致重复触发点赞。
• 未携带CSRF令牌：Django默认对POST请求校验CSRF令牌，不带会直接返回403权限错误。
• 后端视图无响应返回：视图执行完点赞逻辑后没有返回HTTP响应，前端Ajax无法收到处理结果，成功回调永远不会触发。
• 缺少异常处理：后端直接用Feeds.objects.get()取数据，传入不存在的feed_id会直接抛出500服务错误；前端没有请求失败的兜底逻辑。
• 元素选择器不合理：用id选择器绑定事件，页面存在多个点赞按钮时会出现id重复，只有第一个按钮能触发事件。

修复后完整代码 #

1. 点赞按钮HTML #

给每个动态的点赞按钮添加类标识和动态ID属性，避免id重复问题：

<!-- 动态列表循环中每个feed对应的点赞按钮 -->
<a href="javascript:void(0);" class="like-btn" data-feed-id="{{ feed.pk }}">
  点赞 <span class="like-num">{{ feed.likes }}</span>
</a>

注意：页面要提前引入jQuery，且模板渲染时要带上Django默认生成的CSRF隐藏域。

2. 前端Ajax代码 #

$(".like-btn").on("click", function(e) {
    e.preventDefault();
    const currentBtn = $(this);
    const targetFeedId = currentBtn.data("feed-id");
    
    $.ajax({
        type: "POST",
        url: `/feedlikes/${targetFeedId}/`,
        data: {
            csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val()
        },
        dataType: "json",
        success: function(res) {
            if (res.code === 0) {
                alert("点赞成功");
                // 无刷新更新点赞数
                currentBtn.find(".like-num").text(res.like_count);
            } else {
                alert(res.msg || "点赞失败，请重试");
            }
        },
        error: function() {
            alert("网络异常，请稍后再试");
        }
    })
})

3. 后端视图代码 #

from django.http import JsonResponse
from django.shortcuts import get_object_or_404

def feedlikes(request, feed_id):
    # 拦截非POST请求
    if request.method != "POST":
        return JsonResponse({"code": 405, "msg": "方法不允许"}, status=405)
    
    # 取对应动态，不存在直接返回404
    feed = get_object_or_404(Feeds, pk=feed_id)
    # 点赞数+1保存
    feed.likes += 1
    feed.save()

    # 返回JSON格式响应给前端
    return JsonResponse({
        "code": 0,
        "like_count": feed.likes
    })

4. 路由配置检查 #

确认app下的urls.py中路由配置正确接收整数类型的feed_id参数：

from django.urls import path
from .views import feedlikes

urlpatterns = [
    # 其他路由...
    path("feedlikes/<int:feed_id>/", feedlikes, name="feedlikes"),
]

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