Python Web开发记录 Day13：Django part7 Ajax入门与案例（任务管理）




# views.py
from django.shortcuts import render
from django.http import JsonResponse
 
def task_list(request):
    # 假设这是从数据库获取任务列表的逻辑
    tasks = [
        {'id': 1, 'title': '任务1', 'status': '进行中'},
        {'id': 2, 'title': '任务2', 'status': '已完成'},
    ]
    return render(request, 'tasks.html', {'tasks': tasks})
 
def update_task_status(request):
    # 更新任务状态的逻辑
    data = json.loads(request.body)
    task_id = data['task_id']
    new_status = data['new_status']
    # 假设的数据库更新操作
    # update_db(task_id, new_status)
    return JsonResponse({'status': 'success', 'task_id': task_id, 'new_status': new_status})
 
# tasks.html
<!DOCTYPE html>
<html>
<head>
    <title>任务列表</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function updateTaskStatus(taskId, newStatus) {
            var data = {
                'task_id': taskId,
                'new_status': newStatus
            };
            $.ajax({
                url: '/update-task-status/',
                type: 'POST',
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function(response) {
                    console.log(response);
                },
                error: function(error) {
                    console.error(error);
                }
            });
        }
    </script>
</head>
<body>
    <h1>任务列表</h1>
    <ul>
        {% for task in tasks %}
        <li>
            {{ task.title }} - 状态: {{ task.status }}
            <button onclick="updateTaskStatus({{ task.id }}, '已完成')">完成</button>
            <button onclick="updateTaskStatus({{ task.id }}, '进行中')">进行中</button>
        </li>
        {% endfor %}
    </ul>
</body>
</html>

这个示例展示了如何在Django中使用Ajax来异步更新任务状态，而不需要刷新页面。在HTML中，我们定义了一个updateTaskStatus函数，它使用jQuery的$.ajax方法来发送POST请求到后端的update_task_status视图。后端视图处理请求，更新任务状态（这里是假设的数据库操作），并返回JSON响应。

Python Web开发记录 Day13：Django part7 Ajax入门与案例（任务管理）

评论已关闭

推荐阅读