Django项目中点击HTML复选框如何无刷新更新数据库状态？

嘿，这个需求我熟！正好适配你的Django 3.0 + Python 3.7.1环境，咱们一步步来实现复选框状态无刷新更新数据库的功能：

首先需要在你的app里新增一个视图，专门接收复选框状态变更的AJAX请求，修改数据库里的active字段。

在你的views.py里添加如下代码：

from django.http import JsonResponse
from .models import SampleClass
import json

def toggle_active(request):
    if request.method == 'POST':
        try:
            # 解析前端传过来的JSON数据
            data = json.loads(request.body)
            sample_id = data.get('sample_id')
            
            # 找到对应的模型实例，切换active状态
            sample = SampleClass.objects.get(id=sample_id)
            sample.active = not sample.active
            sample.save()
            
            # 返回成功状态和新的状态值
            return JsonResponse({'success': True, 'new_status': sample.active})
        except SampleClass.DoesNotExist:
            return JsonResponse({'success': False, 'error': '找不到对应的Sample实例'})
        except Exception as e:
            return JsonResponse({'success': False, 'error': str(e)})
    # 只接受POST请求
    return JsonResponse({'success': False, 'error': '无效的请求方式'})

然后在项目的urls.py里配置这个视图的路由：

from django.urls import path
from . import views

urlpatterns = [
    # 你的其他路由...
    path('toggle-active/', views.toggle_active, name='toggle_active'),
]

先修改模板里的复选框，给它加上对应的实例ID标识，方便前端获取：

<!-- 绑定sample实例的复选框 -->
<input 
    type="checkbox" 
    id="active-toggle-{{ sample.id }}" 
    {% if sample.active %}checked{% endif %} 
    data-sample-id="{{ sample.id }}"
>
<label for="active-toggle-{{ sample.id }}">是否激活</label>

然后添加JavaScript代码，监听复选框的状态变化，发送AJAX请求到后端：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带data-sample-id属性的复选框
    const toggleBoxes = document.querySelectorAll('input[type="checkbox"][data-sample-id]');
    
    toggleBoxes.forEach(box => {
        box.addEventListener('change', function() {
            const sampleId = this.dataset.sampleId;
            
            // 发送POST请求
            fetch('/toggle-active/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCsrfToken()  // 必须带上Django的CSRF令牌
                },
                body: JSON.stringify({'sample_id': sampleId})
            })
            .then(res => res.json())
            .then(data => {
                if (!data.success) {
                    // 如果更新失败，把复选框状态还原
                    this.checked = !this.checked;
                    alert('更新失败：' + data.error);
                }
            })
            .catch(err => {
                console.error('请求出错:', err);
                this.checked = !this.checked;
                alert('请求出错，请稍后重试');
            });
        });
    });
});

// 辅助函数：获取Django的CSRF令牌（官方推荐写法）
function getCsrfToken() {
    let token = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.startsWith('csrftoken=')) {
                token = decodeURIComponent(cookie.substring('csrftoken='.length));
                break;
            }
        }
    }
    return token;
}

• 上面的代码没有用@csrf_exempt装饰器，因为前端已经正确传递了CSRF令牌，这样更安全，符合Django的安全规范。
• 如果你的项目已经在用jQuery，可以把AJAX部分换成jQuery的写法，代码会更简洁，CSRF令牌可以通过{% csrf_token %}生成的隐藏字段获取。
• 测试的时候可以打开浏览器的开发者工具（F12），查看「网络」标签页，看看请求是否成功，有没有报错信息。
• 这个方案完全兼容你当前的Python 3.7.1和Django 3.0版本，不需要额外安装第三方包。

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