Django实现HTML按钮点击调用后端删除房间接口

1. 配置URL路由 #

在对应app的urls.py中添加删除Room的路由，通过slug参数唯一标识目标房间：

from django.urls import path
from . import views

urlpatterns = [
    # 其他已有路由...
    path('room/<slug:room_slug>/delete/', views.delete_room, name='delete_room'),
]

2. 完善views.py中的delete_room函数 #

确保视图仅处理POST请求，验证用户权限后执行删除操作，同时兼容AJAX和普通请求：

from django.shortcuts import get_object_or_404, redirect
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from .models import Room

@login_required
def delete_room(request, room_slug):
    room = get_object_or_404(Room, slug=room_slug)
    
    # 验证当前用户是房间所有者
    if request.user == room.owner:
        room.delete()
        # 处理AJAX请求
        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
            return JsonResponse({'success': True})
        # 普通请求重定向到房间列表页
        return redirect('room_list')  # 替换为你的房间列表路由名称
    
    # 无权限时的响应
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        return JsonResponse({'success': False, 'error': '无权限删除该房间'}, status=403)
    return redirect('room_list')

3. 修改rooms.html中的按钮实现 #

根据需求选择AJAX无刷新删除或传统表单提交方式：

方法一：AJAX无刷新删除（推荐） #

<!-- 仅房间所有者可见的删除按钮 -->
{% if request.user == room.owner %}
<button onclick="deleteRoom('{{ room.slug }}')" class="delete-btn">删除房间</button>
{% endif %}

<!-- 页面底部添加JS逻辑 -->
<script>
function deleteRoom(roomSlug) {
    if (!confirm('确定要删除这个房间吗？')) return;
    
    fetch(`/room/${roomSlug}/delete/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('房间删除成功');
            window.location.href = '{% url "room_list" %}';
        } else {
            alert(data.error || '删除失败');
        }
    })
    .catch(error => {
        console.error('请求出错:', error);
        alert('删除请求失败，请重试');
    });
}
</script>

方法二：传统表单提交（页面会刷新） #

{% if request.user == room.owner %}
<form action="{% url 'delete_room' room.slug %}" method="POST" onsubmit="return confirm('确定要删除吗？')">
    {% csrf_token %}
    <button type="submit">删除房间</button>
</form>
{% endif %}

关键注意事项 #

• CSRF保护：Django默认开启CSRF验证，POST请求必须携带令牌——AJAX方式在请求头中添加，表单方式使用{% csrf_token %}模板标签。
• 权限校验：视图中必须验证当前用户是房间所有者，防止恶意删除操作。
• 请求方法：删除操作必须使用POST请求，禁止用GET，避免误触或爬虫触发删除。

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