如何在 Django 中使用 AJAX
介绍
AJAX 代表异步 JavaScript 和 XML，它允许网页通过与服务器交换数据来异步更新。这意味着您可以更新网页的某些部分，而无需重新加载整个网页。它涉及浏览器内置的XMLHttpRequest对象、JavaScript 和 HTML DOM 的组合。
AJAX 的工作原理
- 网页上发生事件，例如初始页面加载、表单提交、链接或按钮点击等。
- 创建一个XMLHttpRequest对象并将请求发送到服务器。
- 服务器响应该请求。
- 捕获响应然后服务器使用响应数据进行回复。
在许多情况下，您可能希望发出GET和POST请求，以异步方式来回加载和发布来自服务器的数据。此外，这可以使 Web 应用程序更加动态，并减少页面加载时间。
初始设置
对于本指南，我们将使用jQuery库轻松实现 JavaScript；此外，我们还将使用 Bootstrap 4 使应用程序看起来更美观。
下面是base.html模板，其中包含jQuery库和 bootstrap 框架。请确保正确包含此链接和脚本。另外，请注意内容和javascript块，本指南后面会用到它们。
基础.html
<!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, shrink-to-fit=no">
<title>{% block title %}{% endblock title %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
{% block style %}
{% endblock style %}
</head>
<body>
{% block content %}
{% endblock content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
{% block javascript %}
{% endblock javascript %}
</body>
</html>
我假设您已经知道如何设置 Django。如果不知道如何设置，或者您是 Django 新手，请按照Django 文档进行初始设置。
另请注意，本指南中使用了 Django 2.2 版本。
跳至代码
为了使指南更具互动性，我们将使用实时示例来演示Django 中的POST和GET AJAX 请求。
我们将使用ScrapBook场景，用户可以在其中创建好友，应用程序将动态显示该好友。它还将通过向服务器发送GET请求来检查昵称是否已被使用。
要对我们正在构建的内容感到兴奋，请查看此屏幕截图。在本指南结束时，您将能够构建以下应用程序。
首先，使用startapp命令创建一个名为“my_app”的 Django 应用。请确保在 manage.py 所在的位置（即项目文件夹中）运行以下manage.py命令。
$ python manage.py startapp my_app
创建 Django 应用程序后，请确保将其添加到settings.py 中的INSTALLED_APPS中。
设置.py
INSTALLED_APPS += [
'my_app',
]
创建模型
让我们为具有最少属性的朋友创建一个示例模型。
from django.db import models
# Create your models here.
class Friend(models.Model):
# NICK NAME should be unique
nick_name = models.CharField(max_length=100, unique = True)
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
likes = models.CharField(max_length = 250)
dob = models.DateField(auto_now=False, auto_now_add=False)
lives_in = models.CharField(max_length=150, null = True, blank = True)
def __str__(self):
return self.nick_name
创建模型后，通过运行以下命令执行makemigrations并迁移。
$ python manage.py makemigrations
$ python manage.py migrate
然后，运行 Django 服务器。
$ python manage.py runserver
POST 请求
要提交表单，我们需要向服务器发出 POST 请求，其中包含用户填写的所有表单值。
1. 创建表单
让我们通过继承ModelForm来创建 Django 表单。在FriendForm中，我更改了dob字段并启用了DateField的小部件，其中包含一些年份的变化。另请注意，在__init__方法中，我已使用form-control更新了表单每个字段的 HTML 类属性，以便 Bootstrap 在每个字段上都启用。
最后，在Meta子类中，我包含了可能显示的模态类和字段。
请注意，我在我的应用程序文件夹中创建了一个名为forms.py的新文件。
表单.py
from .models import Friend
from django import forms
import datetime
class FriendForm(forms.ModelForm):
## change the widget of the date field.
dob = forms.DateField(
label='What is your birth date?',
# change the range of the years from 1980 to currentYear - 5
widget=forms.SelectDateWidget(years=range(1980, datetime.date.today().year-5))
)
def __init__(self, *args, **kwargs):
super(FriendForm, self).__init__(*args, **kwargs)
## add a "form-control" class to each form input
## for enabling bootstrap
for name in self.fields.keys():
self.fields[name].widget.attrs.update({
'class': 'form-control',
})
class Meta:
model = Friend
fields = ("__all__")
2. 创建视图
创建表单后，我们在视图中导入FriendForm。本节需要讨论两个视图，它们是indexView和postFriend。
- indexView创建FriendForm对象，从数据库中获取所有朋友对象，并将它们发送到index.html模板，我们将在后面讨论。
- postFriend是 AJAX POST 视图，用于处理POST请求。您会注意到它与常规视图类似，但有一些变化，例如JsonResponse和serialize。我们之所以使用这些方法，是因为它是一个 AJAX 视图，所以我们只需要处理 JSON。
视图.py
from django.http import JsonResponse
from django.core import serializers
from .forms import FriendForm
from .models import Friend
def indexView(request):
form = FriendForm()
friends = Friend.objects.all()
return render(request, "index.html", {"form": form, "friends": friends})
def postFriend(request):
# request should be ajax and method should be POST.
if request.is_ajax and request.method == "POST":
# get the form data
form = FriendForm(request.POST)
# save the data and after fetch the object in instance
if form.is_valid():
instance = form.save()
# serialize in new friend object in json
ser_instance = serializers.serialize('json', [ instance, ])
# send to client side.
return JsonResponse({"instance": ser_instance}, status=200)
else:
# some form errors occured.
return JsonResponse({"error": form.errors}, status=400)
# some error occured
return JsonResponse({"error": ""}, status=400)
3. 创建 URL
对于上述视图，让我们为每个视图创建一个 URL 路径。请注意为postFriend路径指定的名称，该名称将在本指南后面讨论的模板中使用。
urls.py
from django.urls import path
from my_app.views import (
indexView,
postFriend,
)
urlpatterns = [
# ... other urls
path('', indexView),
path('post/ajax/friend', postFriend, name = "post_friend"),
# ...
]
4. 创建模板
现在您已经创建了后端，让我们转到本指南的前端部分。
在index.html中，我们将首先扩展本指南前面讨论过的base.html 。此外，将在块之间写入内容。
模板分为两部分，第一部分渲染表单，第二部分在表格中显示之前存储的好友对象。
索引.html
{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
<form id="friend-form">
<div class="row">
{% csrf_token %}
{% for field in form %}
<div class="form-group col-4">
<label class="col-12">{{ field.label }}</label>
{{ field }}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="Create Friend" />
</div>
<form>
</div>
<hr />
<div class="container-fluid">
<table class="table table-striped table-sm" id="my_friends">
<thead>
<tr>
<th>Nick name</th>
<th>First name</th>
<th>Last name</th>
<th>Likes</th>
<th>DOB</th>
<th>lives in</th>
</tr>
</thead>
<tbody>
{% for friend in friends %}
<tr>
<td>{{friend.nick_name}}</td>
<td>{{friend.first_name}}</td>
<td>{{friend.last_name}}</td>
<td>{{friend.likes}}</td>
<td>{{friend.dob | date:"Y-m-d"}}</td>
<td>{{friend.lives_in}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock content %}
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~