无需跳转至更新模板实现Django任务状态更新

核心思路 #

不用UpdateView（它适配表单提交跳转的场景），改用AJAX请求+后端极简视图的方式，直接在当前页面触发状态修改，无需刷新跳转。

1. 后端编写状态更新视图 #

创建仅处理POST请求的视图，接收任务ID并修改状态：

from django.http import JsonResponse
from django.views.decorators.http import require_POST
from .models import Task

@require_POST
def mark_task_finish(request):
    task_id = request.POST.get('task_id')
    try:
        task = Task.objects.get(id=task_id)
        if task.status == 'active':
            task.status = 'finish'
            task.save()
            return JsonResponse({'success': True})
        return JsonResponse({'success': False, 'error': '任务已处于完成状态'})
    except Task.DoesNotExist:
        return JsonResponse({'success': False, 'error': '任务不存在'})

2. 配置URL路由 #

在urls.py中添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他已有路由
    path('mark-task-finish/', views.mark_task_finish, name='mark_task_finish'),
]

3. 前端模板与AJAX交互 #

在任务列表模板中，给每个待完成任务添加状态切换按钮，并通过AJAX发送请求：

<!-- 任务项示例 -->
{% for task in tasks %}
<div class="task-item" data-task-id="{{ task.id }}">
    <span>{{ task.title }}</span>
    {% if task.status == 'active' %}
        <button class="finish-btn">标记完成</button>
    {% else %}
        <span class="status-tag">已完成</span>
    {% endif %}
</div>
{% endfor %}

<!-- 原生JS实现（无需依赖jQuery） -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const finishBtns = document.querySelectorAll('.finish-btn');
    finishBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const taskId = this.closest('.task-item').dataset.taskId;
            const formData = new FormData();
            formData.append('task_id', taskId);
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            fetch('{% url "mark_task_finish" %}', {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    // 更新页面显示
                    this.replaceWith('<span class="status-tag">已完成</span>');
                } else {
                    alert(data.error);
                }
            });
        });
    });
});
</script>

关键说明 #

• UpdateView的设计初衷是处理完整的表单提交流程（渲染表单→接收提交→页面跳转），不适合这种轻量的无刷新状态更新场景，直接写极简视图更高效。
• Django的POST请求必须携带CSRF令牌，模板中通过{{ csrf_token }}获取即可。

内容的提问来源于stack exchange，提问作者Loret-o