如何仅用Django、Python、JS和HTML实现按钮清空数据库数据

按照你的需求，我们可以通过后端视图处理删除请求、前端发送异步请求的方式实现，全程只用Python、JavaScript和HTML，步骤如下：

1. 新增后端清空数据的视图函数 #

在views.py中添加一个处理清空请求的函数，负责接收前端的POST请求并删除FTP模型的所有数据：

from django.http import JsonResponse
from django.views.decorators.csrf import ensure_csrf_cookie
from .models import FTP

@ensure_csrf_cookie  # 确保前端能获取CSRF Token
def clear_ftp_data(request):
    if request.method == 'POST':
        FTP.objects.all().delete()
        return JsonResponse({'status': 'success', 'message': '所有数据已清空'})
    return JsonResponse({'status': 'error', 'message': '仅支持POST请求'}, status=400)

2. 配置URL路由 #

在项目的urls.py中添加对应的路由，将清空请求映射到上面的视图：

from django.urls import path
from . import views

urlpatterns = [
    path('ftp-table/', views.ftptable, name='ftp_table'),
    path('clear-ftp/', views.clear_ftp_data, name='clear_ftp'),  # 新增这条路由
]

3. 前端添加清空按钮和交互逻辑 #

在你的ftp.html中添加清空按钮，并编写JavaScript发送异步请求，请求成功后更新页面表格：

3.1 添加清空按钮 #

在表格上方或合适位置添加按钮：

<button id="clearBtn" style="padding: 8px 16px; margin-bottom: 10px;">清空所有FTP数据</button>

<!-- 原有的表格代码 -->
<table id="mytable" border="1" cellpadding="2">
    <thead>
        <th>Src_Fname</th>
        <th>Dest_Fname</th>
        <th>Bytes_Xfer</th>
        <th>Xfer_Sec</th>
        <th>Xfer_MBPS</th>
    </thead>
    <tbody id="tablebody">
    {% for ftp in filetp %}
    <tr>
        <td>{{ ftp.Src_Fname }}</td>
        <td>{{ ftp.Dest_Fname }}</td>
        <td>{{ ftp.Bytes_Xfer }}</td>
        <td>{{ ftp.Xfer_Sec }}</td>
        <td>{{ ftp.Xfer_MBPS }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>

3.2 添加JavaScript逻辑 #

在HTML底部添加脚本，处理按钮点击事件，发送POST请求并更新页面：

<!-- 先添加CSRF Token，用于Django的CSRF保护 -->
{% csrf_token %}

<script>
document.getElementById('clearBtn').addEventListener('click', function() {
    // 确认清空操作，避免误触
    if (!confirm('确定要清空所有数据吗？此操作不可恢复！')) {
        return;
    }

    // 获取CSRF Token
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    fetch('/clear-ftp/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            // 清空表格内容
            document.getElementById('tablebody').innerHTML = '';
            alert(data.message);
        } else {
            alert('清空失败：' + data.message);
        }
    })
    .catch(error => {
        console.error('请求出错:', error);
        alert('请求失败，请重试');
    });
});
</script>

4. 测试功能 #

启动Django服务后，进入FTP表格页面，点击清空按钮，确认后即可删除数据库中所有FTP数据，同时页面表格会被清空。

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