Django与JavaScript交互：DELETE请求返回404 Not Found问题求助

核心原因：URL路径缺失App命名空间前缀 #

你的advice app设置了app_name = 'advice'，但前端JavaScript发送请求时用的是/delete_document/${selectedDocumentId}/，没有加上app的路由前缀（通常是/advice/），导致Django无法匹配到对应的视图路由，返回404错误。

解决步骤 #

1. 生成正确的请求URL（避免硬编码） #

不要直接写死URL路径，用Django的模板标签生成带命名空间的URL模板，再替换成实际的文档ID：

• 在HTML中添加一个隐藏元素，存储删除接口的URL模板（用0作为占位符）：

<span id="deleteUrlTemplate" data-url="{% url 'advice:delete_document' 0 %}" style="display: none;"></span>

• 修改JavaScript中的fetch请求逻辑，替换占位符为选中的文档ID：

document.getElementById('deleteButton').addEventListener('click', function() {
    var selectedDocumentId = document.getElementById('documentSelect').value;
    if (selectedDocumentId === 'Select a file') {
        alert('Please select a document to delete.');
    } else {
        if (confirm('Are you sure you want to delete this document?')) {
            // 获取模板URL并替换占位符
            const deleteUrlTemplate = document.getElementById('deleteUrlTemplate').dataset.url;
            const deleteUrl = deleteUrlTemplate.replace('0', selectedDocumentId);
            
            fetch(deleteUrl, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': document.querySelector('input[name="csrfmiddlewaretoken"]').value
                }
            })
            .then(response => {
                if (response.ok) {
                    window.location.reload();
                } else {
                    console.error('Failed to delete document');
                }
            })
            .catch(error => console.error('Error:', error));
        }
    }                
});

2. 验证根路由配置 #

检查项目根目录的urls.py，确认已经正确包含advice app的路由，示例如下：

from django.urls import path, include

urlpatterns = [
    # 其他路由...
    path('advice/', include('advice.urls')),
]

如果根路由中include的前缀不是advice/，请对应调整前端URL模板的前缀部分。

3. 可选：调整视图返回状态码 #

当前视图返回status=204（无内容），虽然response.ok可以正常判断，但如果后续需要解析返回的JSON信息，建议改成200状态码：

@require_http_methods(['DELETE'])
def delete_document(request, document_id):
    document = get_object_or_404(Document, pk=document_id)
    document.delete()
    return JsonResponse({'message': 'Document deleted successfully'}, status=200)

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