如何通过JS点击按钮向Django数据库添加并更新数据？

需求：

• 点击添加按钮，将输入的任务存入数据库，刷新页面后显示新任务
• 点击列表项切换选中状态时，自动更新数据库中对应todo记录的com字段
  当前问题：仅能实现前端静态更新，数据未同步到数据库

1. 修改后端视图函数（views.py） #

更新视图函数，处理添加任务和更新任务状态的POST请求：

from django.shortcuts import render, redirect
from django.http import JsonResponse
from .models import todo

def index(request):
    if request.method == 'POST':
        # 处理添加新任务
        if 'add_task' in request.POST:
            task_name = request.POST.get('task_name')
            if task_name:
                todo.objects.create(names=task_name, com=False)
            return redirect('index')
        
        # 处理更新任务完成状态
        elif 'toggle_task' in request.POST:
            task_id = request.POST.get('task_id')
            try:
                task = todo.objects.get(id=task_id)
                task.com = not task.com
                task.save()
                return JsonResponse({'success': True})
            except todo.DoesNotExist:
                return JsonResponse({'success': False, 'error': '任务不存在'})
    
    # GET请求返回页面和所有任务
    return render(request, "mytasks/index.html", {
        "names": todo.objects.all()
    })

2. 更新前端HTML模板（index.html） #

• 列表项添加data-id属性，用于标识任务ID
• 调整任务列表渲染逻辑，提前渲染删除按钮

<!-- 任务输入框和添加按钮 -->
<input type="text" id="myInput" placeholder="Title...">
<button onclick="newElement()">Add</button>

<!-- 任务列表 -->
<ul id="myUL">
    {% for name in names %}
    <li data-id="{{ name.id }}" {% if name.com %}class="checked"{% endif %}>
        {{ name.names }}
        <span class="close">×</span>
    </li>
    {% endfor %}
</ul>

3. 修改前端JavaScript代码 #

更新JS逻辑，通过AJAX与后端交互实现数据同步，同时处理Django的CSRF令牌验证：

// 切换任务完成状态并同步数据库
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'LI') {
        const taskId = ev.target.dataset.id;
        // 发送POST请求更新状态
        fetch('', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: `toggle_task=1&task_id=${taskId}`
        })
        .then(response => response.json())
        .then(data => {
            if (!data.success) {
                alert('更新任务状态失败');
            }
        });
    }
}, false);

// 添加新任务并同步数据库
function newElement() {
    var inputValue = document.getElementById("myInput").value.trim();
    if (inputValue === '') {
        alert("请输入任务内容！");
        return;
    }

    // 发送POST请求添加任务
    fetch('', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: `add_task=1&task_name=${encodeURIComponent(inputValue)}`
    })
    .then(() => {
        window.location.reload();
    })
    .catch(error => {
        alert('添加任务失败');
        console.error(error);
    });

    document.getElementById("myInput").value = "";
}

// 辅助函数：获取Django CSRF令牌
function getCookie(name) {
    let cookieValue = 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.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 绑定删除按钮事件
const closeButtons = document.querySelectorAll('.close');
closeButtons.forEach(button => {
    button.onclick = function() {
        const li = this.parentElement;
        li.style.display = "none";
        // 如需同步删除数据库记录，可添加对应POST请求逻辑
    }
});

4. 配置URL路由（urls.py） #

确保视图函数映射到根路径：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

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