推荐超级课程：
@TOC
让我们创建一个简单的 Django 项目，其中包含不同类型的 AJAX 请求示例，例如 GET、POST、PUT 和 DELETE。在这个示例中，我们将创建一个简单的待办事项列表应用程序，用户可以使用 AJAX 添加、编辑、删除和标记任务为完成。 首先，确保您已安装 Django。您可以使用 pip 安装它：
pip install django
让我们创建一个新的 Django 项目称为 “todo_project” 和一个 Django 应用程序称为 “todo_app”。
django-admin startproject todo_project
cd todo_project
python manage.py startapp todo_app
现在，让我们为待办事项应用程序定义模型、视图和 URL。
在 todo_app/models.py 中：
from django.db import models
class TodoItem(models.Model):
title = models.CharField(max_length=200)
completed = models.BooleanField(default=False)
def __str__(self):
return self.title
初始化数据库：
python manage.py migrate
- 此命令根据您的 Django 应用程序中定义的模型创建必要的数据库表。它查看每个应用中的
models.py文件并创建相应的数据库模式。 创建初始迁移：
python manage.py makemigrations
此命令检查您模型的当前状态，并在 todo_app/migrations/ 目录中创建迁移文件。这些文件包含根据您模型中的更改更新数据库模式的指令。
应用迁移：
python manage.py migrate
此命令执行迁移，将更改应用于数据库模式。它读取在 makemigrations 步骤中创建的迁移文件，并相应地更新数据库。
创建一个超级用户以访问 Django 管理界面：
python manage.py createsuperuser
按照提示设置用户名、电子邮件和密码。
在 todo_app 目录中创建一个 templates 文件夹，并将 todo_list.html 放置在 templates/todo_app/ 中。
在 todo_app/views.py 中，定义用于显示待办事项列表、添加、更新和删除待办事项的视图。相应地更新同一目录中的 urls.py。
from django.shortcuts import render, HttpResponse, get_object_or_404
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
from .models import TodoItem
import json
def todo_list(request):
todos = TodoItem.objects.all()
return render(request, 'todo_app/todo_list.html', {'todos': todos})
@csrf_exempt
def add_todo(request):
if request.method == 'POST':
data = json.loads(request.body)
title = data['title']
todo = TodoItem.objects.create(title=title)
return JsonResponse({'id': todo.id, 'title': todo.title, 'completed': todo.completed})
@csrf_exempt
def update_todo(request, todo_id):
todo = get_object_or_404(TodoItem, pk=todo_id)
if request.method == 'PUT':
data = json.loads(request.body)
completed = data['completed']
todo.completed = completed
todo.save()
return JsonResponse({'id': todo.id, 'completed': todo.completed})
@csrf_exempt
def delete_todo(request, todo_id):
todo = get_object_or_404(TodoItem, pk=todo_id)
if request.method == 'DELETE':
todo.delete()
return HttpResponse(status=204)
在 todo_project/urls.py 中：
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('todo_app.urls')),
]
在 todo_app/urls.py 中：
from django.urls import path
from . import views
urlpatterns = [
path('', views.todo_list, name='todo_list'),
path('add/', views.add_todo, name='add_todo'),
path('update/<int:todo_id>/', views.update_todo, name='update_todo'),
path('delete/<int:todo_id>/', views.delete_todo, name='delete_todo'),
]
现在，让我们为待办事项应用程序创建模板。在 todo_app/templates/todo_app/todo_list.html 中：
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="todo-input" placeholder="Add new todo">
<button id="add-todo">Add Todo</button> <br>
{% comment %} todo list here {% endcomment %}
<ul id="todo-list">
{% for todo in todos %}
<li id="todo-{{ todo.id }}">
<input type="checkbox" class="todo-checkbox" {% if todo.completed %}checked{% endif %}>
<span class="todo-title">{{ todo.title }}</span>
<button class="delete-todo" data-id="{{ todo.id }}">Delete</button>
</li>
{% endfor %}
</ul>
<script>
$(document).ready(function() {
$('#add-todo').click(function() {
var title = $('#todo-input').val();
$.ajax({
url: "{% url 'add_todo' %}",
type: "POST",
contentType: "application/json",
data: JSON.stringify({title: title}),
success: function(data) {
$('#todo-list').append(`<li id="todo-${data.id}">
<input type="checkbox" class="todo-checkbox">
<span class="todo-title">${data.title}</span>
<button class="delete-todo" data-id="${data.id}">Delete</button>
</li>`);
}
});
});
$('.delete-todo').click(function() {
var id = $(this).data('id');
$.ajax({
url: `/delete/${id}/`,
type: "DELETE",
success: function() {
$(`#todo-${id}`).remove();
}
});
});
$('.todo-checkbox').change(function() {
var id = $(this).closest('li').attr('id').split('-')[1];
var completed = $(this).is(':checked');
$.ajax({
url: `/update/${id}/`,
type: "PUT",
contentType: "application/json",
data: JSON.stringify({completed: completed}),
success: function(data) {
alert('Successfully Updated!');
}
});
});
});
</script>
</body>
</html>
现在，让我们运行我们的 Django 服务器：
python manage.py runserver
现在，您可以访问 http://127.0.0.1:8000/ 来查看您的待办事项列表应用程序。您可以使用 AJAX 请求添加待办事项、删除它们并将它们标记为完成！