Django表格数据交互：点击行删除数据库记录

在Django项目中，我们经常需要在网页表格中展示数据，并允许用户通过点击表格行来执行特定操作，例如删除对应数据库记录。本文将详细介绍如何实现这一功能，并提供清晰易懂的代码示例。

1. HTML模板中的表格构建

首先，我们需要在HTML模板中创建一个表格，并为每一行添加点击事件处理。html

{% for item in data %} <tr onclick='deleteRow('{{ item.编号 }}')'> {% endfor %}

姓名	编号	所属部门
{{ item.姓名 }}	{{ item.编号 }}	{{ item.所属部门 }}

在上述代码中：

我们使用<tr>标签来表示表格中的每一行，<td>标签来表示每一列的数据。- 通过onclick属性，我们为每一行绑定了一个名为deleteRow的JavaScript函数，并将该行的编号作为参数传递给函数。

2. JavaScript函数处理点击事件

接下来，我们需要编写deleteRow函数来处理点击事件，并将选中的行数据发送到Django后端。javascriptfunction deleteRow(编号) { // 发送AJAX请求到Django视图函数进行删除操作 fetch('/delete_row/', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' // 如果使用了CSRF保护，需要传递CSRF令牌 }, body: JSON.stringify({ '编号': 编号 }) }) .then(response => response.json()) .then(data => { // 处理删除操作的返回结果，例如刷新页面或更新表格数据 console.log(data); location.reload(); }) .catch(error => { // 处理错误 console.error(error); });}

在上述代码中：

我们使用fetch API发送POST请求到Django视图函数/delete_row/，并将选中的行编号作为JSON数据发送。- 注意，如果你的Django项目启用了CSRF保护，你需要在请求头中添加CSRF令牌。- 收到服务器响应后，我们处理返回结果，例如刷新页面或更新表格数据。

3. Django视图函数处理删除请求

最后，我们需要编写Django视图函数来处理来自前端的删除请求，并执行数据库操作。pythonfrom django.http import JsonResponseimport json

def delete_row(request): if request.method == 'POST': data = json.loads(request.body) 编号 = data.get('编号') # 执行删除操作 try: row = 表名.objects.get(编号=编号) row.delete() return JsonResponse({'status': 'success'}) except 表名.DoesNotExist: return JsonResponse({'status': 'error', 'message': '记录不存在'}) else: return JsonResponse({'status': 'error', 'message': '请求方法错误'})

在上述代码中：

我们首先检查请求方法是否为POST。- 然后，我们从请求体中解析JSON数据，获取要删除的行的编号。- 最后，我们尝试从数据库中获取对应记录并执行删除操作。如果删除成功，返回成功状态码；否则，返回错误信息。

通过以上步骤，我们就可以在Django项目中实现点击表格行删除数据库记录的功能。这种交互方式可以提升用户体验，并使你的Web应用程序更加强大和易用。