Django：点击按钮时如何删除模型数据？

我来帮你搞定这个问题！要实现点击Accept按钮删除对应{{donation.pk}}的Donation模型数据，咱们可以分后端和前端两步来做，这里提供两种常用方案，你可以根据需求选择：

方案一：无刷新AJAX方式（推荐，用户体验更好） #

这种方式点击按钮后页面不会刷新，直接在后台完成删除操作，还能即时更新页面内容。

1. 后端编写删除视图（views.py） #

首先在你的app的views.py里添加一个处理删除请求的视图，注意要处理POST请求（GET请求做删除操作有安全风险）：

from django.http import JsonResponse
from django.shortcuts import get_object_or_404
from .models import Donation
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def delete_donation(request):
    if request.method == 'POST':
        # 获取前端传来的捐赠pk
        donation_pk = request.POST.get('pk')
        # 找到对应的捐赠记录，不存在则返回404
        donation = get_object_or_404(Donation, pk=donation_pk)
        # 删除记录
        donation.delete()
        # 返回成功响应
        return JsonResponse({'status': 'success'})
    # 如果不是POST请求，返回错误响应
    return JsonResponse({'status': 'error'}, status=400)

2. 配置路由（urls.py） #

在项目或app的urls.py里添加对应的路由，让请求能映射到上面的视图：

from django.urls import path
from . import views

urlpatterns = [
    # 你的其他路由...
    path('delete-donation/', views.delete_donation, name='delete_donation'),
]

3. 前端修改按钮并添加JS逻辑 #

把原来的<a>标签改成按钮（或者保留<a>但阻止默认跳转），绑定点击事件发送AJAX请求：

<!-- 替换原来的a标签为这个按钮，用data-pk存储捐赠的pk -->
<button style="float:right; margin:5px; color: white;" class="btn btn-success delete-donation-btn" data-pk="{{ donation.pk }}">Accept</button>

<!-- 确保页面里有csrf token（Django要求POST请求必须带这个） -->
{% csrf_token %}

<!-- 用原生JS实现AJAX（不需要jQuery） -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有删除按钮
    const deleteButtons = document.querySelectorAll('.delete-donation-btn');
    
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const pk = this.dataset.pk;
            const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
            
            // 发送POST请求
            fetch("{% url 'delete_donation' %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': csrfToken
                },
                body: `pk=${pk}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // 删除成功后，把对应的捐赠条目从页面移除（假设你的捐赠项有父元素类donation-item）
                    this.closest('.donation-item').remove();
                    alert('捐赠已接受并成功删除！');
                } else {
                    alert('删除捐赠失败，请重试。');
                }
            })
            .catch(error => {
                console.error('删除出错:', error);
                alert('删除过程中出现错误，请稍后再试。');
            });
        });
    });
});
</script>

方案二：表单提交方式（简单易实现，页面会刷新） #

如果不需要无刷新体验，用表单提交更简单，不需要写JS：

<!-- 把按钮放在一个表单里，隐藏存储pk，提交到删除路由 -->
<form action="{% url 'delete_donation' %}" method="POST" style="display:inline;">
    {% csrf_token %}
    <input type="hidden" name="pk" value="{{ donation.pk }}">
    <button type="submit" style="float:right; margin:5px; color: white;" class="btn btn-success">Accept</button>
</form>

然后修改后端视图，删除后重定向到你的捐赠列表页面：

from django.shortcuts import redirect, get_object_or_404
from .models import Donation

def delete_donation(request):
    if request.method == 'POST':
        donation_pk = request.POST.get('pk')
        donation = get_object_or_404(Donation, pk=donation_pk)
        donation.delete()
        # 替换成你的捐赠列表页面的路由名称
        return redirect('donation_list')
    # 非法请求重定向到列表页
    return redirect('donation_list')

注意事项 #

• 一定要带上{% csrf_token %}，否则Django会拒绝POST请求（这是Django的安全机制）。
• 如果用AJAX方式，确保{% url 'delete_donation' %}能正确生成路由URL，不要写错路由名称。
• 可以根据实际情况调整成功后的提示或页面更新逻辑，比如移除对应的DOM元素、显示成功消息等。

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