Django中AJAX请求无法匹配URL的问题求助

问题原因 #

你遇到的/box/delete-comment/id路径问题，核心原因是AJAX请求使用了相对路径：当前页面URL是/box/<box_id>，浏览器会自动将相对路径delete-comment/${id}拼接在当前页面路径后方，导致实际请求路径变成/box/delete-comment/<id>，但你的delete-comment路由是配置在网站根路径下的，因此Django无法匹配到对应的URL规则。

解决方案 #

方案1：使用根路径开头的绝对URL #

直接在fetch的URL前添加/，强制请求从网站根路径发起：

comment.addEventListener("click", () => {
        fetch(`/delete-comment/${comment.dataset.comment_id}`, {
            method: "DELETE",
            headers: {
                "X-Requested-With": "XMLHttpRequest",
            }
        })
    });

方案2：用Django模板标签生成正确URL（推荐） #

这种方式更灵活，后续路由规则修改时无需手动调整JS代码：

1. 在模板渲染评论元素时，通过{% url %}标签生成删除评论的完整URL，存入data属性：

<!-- 示例评论元素 -->
<div class="comment" data-comment-url="{% url 'delete_comment' comment.id %}">
    <!-- 评论内容 -->
</div>

2. 在JS中直接读取预生成的URL：

comment.addEventListener("click", () => {
        fetch(comment.dataset.commentUrl, {
            method: "DELETE",
            headers: {
                "X-Requested-With": "XMLHttpRequest",
            }
        })
    });

额外优化建议 #

你的视图函数存在状态码语义错误和异常遗漏问题，建议调整为：

from django.shortcuts import get_object_or_404
from django.http import HttpResponse, HttpResponseForbidden, HttpResponseBadRequest

def delete_comment(request, id):
    if request.headers.get("X-Requested-With") != "XMLHttpRequest":
        return HttpResponse('Invalid request', status=400)
    
    if request.method != 'DELETE':
        return HttpResponse('Method not allowed', status=405)
    
    comment = get_object_or_404(Comment, id=id)
    if comment.user != request.user:
        return HttpResponseForbidden('You are not authorized to delete this comment')
    
    comment.delete()
    return HttpResponse('Comment deleted successfully', status=200)

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