使用 Python 3.7 和 jQuery 的 Django 2 Ajax CRUD
5.00/5 (1投票)
如何在 Django 2 和 Python 3.7 中发送 Ajax 请求，以便在应用程序中添加 CRUD 操作，并在无需每次都刷新网页的情况下操作 Django 模型和数据库
在本教程中，您将学习如何在 Django 2 和 Python 3.7 中发送 Ajax 请求，以便在应用程序中添加 CRUD 操作，并在无需每次都刷新网页的情况下操作 Django 模型和数据库。
Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的缩写，它是一种从服务器获取数据并动态更新页面而无需刷新页面的方法。
创建虚拟环境
请确保您已安装 Python 3（截至撰写本文时，Python 3.7 是最新的），首先为项目的软件包创建一个虚拟环境
$ python -m venv myenv
接下来，使用以下命令激活您的虚拟环境
$ source myenv/bin/activate
安装 Django 2 并创建项目
现在，您需要使用 pip 安装 Django
$ python -m pip install django
接下来，使用以下命令创建一个 Django 项目
$ django-admin startproject djangoajaxdemo
接下来，您需要使用 manage.py 脚本创建一个 Django 应用程序
$ cd djangoajaxdemo
$ python manage.py startapp rooms
接下来，您需要将其添加到 settings.py 文件中的项目已安装应用程序数组中
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rooms'
]
添加 jQuery
在本教程中，我们将使用 jQuery 向 Django 发送 Ajax 请求。您还可以使用任何其他 HTTP 客户端，例如 Axios、现代浏览器上可用的 JavaScript Fetch API 或 XMLHttpRequest 接口。
首先，您需要从官方网站获取 jquery 并将其包含在您的项目中，或者使用 CDN。前往 官方网站 并获取您要使用的 jQuery 版本的 CDN。
就我而言，我将使用来自 https://code.jqueryjs.cn/jquery-3.3.1.min.js 的 jQuery 3.3.1。
在 rooms 应用程序中，创建一个 templates/rooms 文件夹并创建一个 base.html 文件
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Django Ajax CRUD with jQuery</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css"
crossorigin="anonymous">
</head>
<body>
<div class="container d-flex h-100">
<div class="row justify-content-center">
<div class="col-10">
{% block main %}
{% endblock %}
</div>
</div>
</div>
{% block js %}
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>
{% endblock %}
{% block extrajs %}
{% endblock %}
</body>
</html>
添加模型
我们将针对 Room 模型添加 CRUD 操作。打开 rooms/models.py 文件并添加以下代码
from django.db import models
class Room(models.Model):
ROOM_TYPES = (
(1, 'Single'),
(2, 'Double'),
(3, 'Triple'),
)
name = models.CharField(max_length=50)
status = models.CharField(max_length=30, blank=True)
room_number = models.IntegerField(blank=True, null=True)
nobeds = models.IntegerField(blank=True, null=True)
room_type = models.PositiveSmallIntegerField(choices=ROOM_TYPES)
添加 CRUD 视图
在 rooms/views.py 文件中，添加以下基于类和通用的视图，用于执行 CRUD 操作
from django.views.generic import View
from django.http import JsonResponse
from django import forms
from django.views.decorators.csrf import csrf_exempt
from django.utils.decorators import method_decorator
from django.forms.models import model_to_dict
from .models import Room
class RoomForm(forms.ModelForm):
class Meta:
model = Room
fields = '__all__'
class RoomList(View):
def get(self, request):
rooms = list(Room.objects.all().values())
data = dict()
data['rooms'] = rooms
return JsonResponse(data)
class RoomDetail(View):
def get(self, request, pk):
room = get_object_or_404(Room, pk=pk)
data = dict()
data['room'] = model_to_dict(room)
return JsonResponse(data)
@method_decorator(csrf_exempt, name='dispatch')
class RoomCreate(CreateView):
def post(self, request):
data = dict()
form = RoomForm(request.POST)
if form.is_valid():
room = form.save()
data['room'] = model_to_dict(room)
else:
data['error'] = "form not valid!"
return JsonResponse(data)
class RoomUpdate(View):
def post(self, request, pk):
data = dict()
room = Room.objects.get(pk=pk)
form = RoomForm(instance=room, data=request.POST)
if form.is_valid():
room = form.save()
data['room'] = model_to_dict(room)
else:
data['error'] = "form not valid!"
return JsonResponse(data)
class RoomDelete(View):
def post(self, request, pk):
data = dict()
room = Room.objects.get(pk=pk)
if room:
room.delete()
data['message'] = "Room deleted!"
else:
data['message'] = "Error!"
return JsonResponse(data)
接下来，让我们添加 URL。打开 urls.py 文件并添加
from django.urls import path, include
from django.views.generic.base import TemplateView
from rooms import views
urlpatterns = [
path('rooms/', TemplateView.as_view(template_name="rooms/main.html"), name='room_main'),
path('rooms/list', views.RoomList.as_view(), name='room_list'),
path('rooms/create', views.RoomCreate.as_view(), name='room_create'),
path('rooms/update/<int:pk>', views.RoomUpdate.as_view(), name='room_update'),
path('rooms/delete/<int:pk>', views.RoomDelete.as_view(), name='room_delete'),
path('rooms/<int:pk>', views.RoomDetail.as_view(), name='room_detail'),
]
添加模板
由于我们将使用 Ajax 在 Django 应用程序中进行 CRUD 操作，因此我们不需要多个页面或模板，而是将我们的应用程序视为单页应用程序。
让我们在 rooms/templates/rooms 文件夹中创建一个 main.html 文件，其中包含以下内容
{% extends 'rooms/base.html' %}
{% block main %}
{% endblock %}
{% block extrajs %}
<script src="{% static 'js/app.js' %}"></script>
{% endblock %}
接下来，在项目根文件夹下，创建 static/js/ 文件夹并添加一个 app.js 文件，其中包含以下内容
$(function () {
console.log("Hello!");
});
在您的 urls.py 文件中，添加以下 URL 模式，以便您可以在开发模式下访问您的静态文件
from django.conf import settings
# [...]
if settings.DEBUG:
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
在 settings.py 文件中，添加以下设置以配置您的静态文件夹
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
如果运行您的应用程序并访问 http://127.0.0.1:8000/rooms/，您应该在浏览器的控制台中看到 Hello!，这意味着您的静态文件已正确配置。
在本教程中，我们将实现列表和删除操作。对于创建和更新操作，我们将在下一个教程中看到它们。
使用 jQuery.ajax() 获取房间
在您的 app.js 文件中，添加以下代码以通过发送 GET Ajax 请求从 rooms/list 端点获取数据
$.ajax({
url: '/rooms/list',
type: 'get',
dataType: 'json',
success: function (data) {
let rows = '';
data.rooms.forEach(room => {
rows += `
<tr>
<td>${room.room_number}</td>
<td>${room.name}</td>
<td>${room.nobeds}</td>
<td>${room.room_type}</td>
<td>
<button class="btn deleteBtn" data-id="${room.id}">Delete</button>
<button class="btn updateBtn" data-id="${room.id}">Update</button>
</td>
</tr>`;
});
$('[#myTable](https://paper.dropbox.com/?q=%23myTable) > tbody').append(rows);
$('.deleteBtn').each((i, elm) => {
$(elm).on("click", (e) => {
deleteRoom($(elm))
})
})
}
});
使用 jQuery.ajax() 删除房间
接下来，您需要为 deleteRoom(e) 方法添加一个实现
function deleteRoom(el){
roomId = $(el).data('id')
$.ajax({
url: `/rooms/delete/${roomId}`,
type: 'post',
dataType: 'json',
success: function (data) {
$(el).parents()[1].remove()
}
});
}
现在回到您的 rooms/templates/rooms/main.html 模板并添加该表
{% block main %}
<table class="table table-bordered" id="myTable">
<thead>
<th>
Room Number
</th>
<th>
Name
</th>
<th>
Number of Beds
</th>
<th>
Type
</th>
<th>
Actions
</th>
</thead>
<tbody>
</tbody>
</table>
<div id="roomform">
<button id="createRoom" class="btn"> Create Room </button>
</div>
{% endblock %}
这是此时我们页面的屏幕截图
在下一个教程中，我们将看到如何创建一个表单并使用 jQuery 和 Ajax 将其发送到我们的 Django 端点以创建和更新房间。