Python で Ajax と Django を統合する

この記事の目的は、Ajax とは何かを示し、Ajax を Django と統合し、ブラウザーから Ajax の get および post リクエストを送信し、Python で Django サイトのデータを処理することです。

Python で Ajax と Django を統合する

Ajax は非同期 JavaScript と XML の略ですが、それはどういう意味ですか？Ajax は、Web ページを更新せずにバックグラウンドでデータを送受信するために使用される Web 開発手法にすぎません。

実際の Ajax の例は、Twitter にアクセスしてフィードを開く場合です。

しばらくすると、画面の上部に新しいツイートが利用可能であることを示すメニューバーが表示されます。さらに長く待つと、Twitter に投稿する人が増えるにつれて数が増えることがわかります。

ページが完全に更新されることはないことに注意する必要があります。これで Ajax についてある程度理解できたので、Django フレームワークで Ajax を使用する方法を見てみましょう。

Ajax の操作方法を示す簡単なプロジェクトを作成しましたが、プロジェクト全体の操作方法を示すことは不可能です。Django に精通している場合は、Django プロジェクトの作成方法をすでに知っているので、いくつかのフィールドを持つ contact という名前のモデルと、連絡先モデルフォームの単純なモデルがあります。

フォームを送信すると、データがデータベースに保存され、同じページ自体にリダイレクトされ、対応する URL が設定されます。

jQuery を使用して Ajax をトリガーしており、CDN も必要です。したがって、フォームを送信するたびにフォームで実行するロジックは、フォームが有効な場合、サーバーが応答するというものです。

通常の JavaScript を使用してフォームのオブジェクトをフェッチしているため、submit イベントが必要です。そのイベントがトリガーされると、submithandler 関数が呼び出されます。

デフォルトでイベントを受け取る submithandler 関数を作成し、フォーム送信のデフォルトアクションを防止します。これは、フォームが送信されないことを意味します。Ajax リクエストを行うために、HTML ファイルにいくつかの jQuery を書き込みます。

Ajax オブジェクトでいくつかの属性を指定します。1つ目は、リクエストのタイプである type です。

2 種類のリクエストを渡すことができます。get または post なので、post を渡す必要があります。次の属性は url です。これは、post リクエストをヒットする URL を意味します。

したがって、ここでは Django テンプレートインデックスを使用します。連絡先ページの URL を渡します。連絡先は、後で 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 と統合するための公式ドキュメントを読んでください。