迹忆客 专注技术分享

本文旨在演示 Ajax 是什么，将 Ajax 与 Django 集成，从浏览器发送 Ajax 的 get 和 post 请求，并用 Python 处理 Django 站点上的数据。

Ajax 代表异步 JavaScript 和 XML，但这是什么意思？Ajax 只是一种 Web 开发技术，用于在后台发送和检索数据而无需刷新网页。

一个真实的 Ajax 示例是，如果我们前往 Twitter 并打开我们的提要。

一段时间后，你会看到屏幕顶部出现一个菜单栏，指示有新的推文可用，如果你等待更长的时间，你会看到随着越来越多的人在 Twitter 上发布内容，数量会增加。

我们需要注意的是，我们的页面永远不会完全刷新。现在我们对 Ajax 有了一些了解，让我们看看如何在 Django 框架中使用它。

我们创建了一个简单的项目来演示如何使用 Ajax，但是不可能演示如何使用我们的整个项目。如果你熟悉 Django，那么你已经知道如何创建 Django 项目，因此我们有一个名为 contact 的模型，其中包含一些字段和一个用于联系模型表单的简单模型。

当我们提交表单时，数据将被保存到数据库中，重定向到同一页面本身，并设置相应的 URL。

我们使用 jQuery 来触发 Ajax，还需要 CDN。所以每当我们提交表单时，我们会在表单中做的逻辑是，如果表单有效，服务器就会响应。

我们使用常规的 JavaScript 来获取表单的对象，所以我们需要一个 submit 事件，如果该事件被触发，它将调用一个 submithandler 函数。

我们创建了一个 submithandler 函数，它会默认接收事件，我们要阻止表单提交的默认操作，这意味着表单不会被提交，所以要发出 Ajax 请求，我们将在我们的 HTML 文件。

我们将在 Ajax 对象中指定一些属性；第一个是 type，它是一种请求。

我们可以传递两种类型的请求； get 或 post，所以我们必须通过 post。下一个属性是 url，这意味着我们要点击 post 请求的 URL。

所以我们将在这里使用 Django 模板索引；我们将传递我们的 contact 页面的 URL。contact 是我们稍后将在 url.py 中编写的 URL 的名称。

现在下一个是 data，这意味着我们希望表单数据在服务器端，以便在服务器上处理表单数据。因此，我们需要使用表单 ID 在 Ajax 请求中发送该数据。

下一个是 dataType，它是我们期望从服务器返回的数据类型，所以如果我们在视图中发送一些 HTTP 响应并且表单是有效的或发送一些 JSON 数据，我们需要以 JSON 格式传递数据格式，所以我们以 JSON 类型传递它。

我们为最后一个传递了 success 属性，它接受一个名为 successFunction 的函数。如果请求成功，此函数将弹出一个警报窗口。

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>

<script>
    const form = document.getElementById('form');
    form.addEventListener("submit", submitHandler);

    function submitHandler(e) {
        e.preventDefault();
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : '{% url 'contact' %}', // the url where we want to POST
            data        : $('#form').serialize(), // our form data
            dataType    : 'json', // what type of data do we expect back from the server
            success     : successFunction
        });
    }

    function successFunction(msg) {
        if (msg.message === 'success') {
            alert('Success!');
            form.reset()
        }
    }
</script>

现在我们需要设置名称为 contact 的 URL，并从 views.py 文件中调用 contact 方法，这意味着当用户点击此 URL 时，将调用 contact 方法。

urlpatterns = [
    path('', views.contact, name='contact'),
]

现在我们可以在 views.py 文件中做一些事情，所以我们知道每当我们提交表单时，contact 函数会调用相应的函数并捕获它，它会收到一个 Ajax 请求并检查 Ajax 使用 .is_ajax() 方法的请求是否有效。

from django.http import JsonResponse
from django.shortcuts import render, redirect
from .forms import ContactModelForm

def contact(request):
    form = ContactModelForm()

    if request.is_ajax():
        form = ContactModelForm(request.POST)
        print(request.POST)
        if form.is_valid():
            form.save()
            return JsonResponse({
                'message': 'success'
            })
    return render(request, 'contact.html', {'form': form})

点击这里阅读官方文档，将 Ajax 与 Django 集成。