# 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响应。