Django で AJAX リクエストとレスポンスを送信する方法

AJAX (Asynchronous JavaScript and XML) は、Web ページの一部を更新する機能を提供する技術です。これは、Web ページ全体を再読み込みせずに、Web ページの一部を更新できることを意味します。これは、Webアプリケーションをより速く、よりダイナミックにすることができる優れたリソースです。別のフレームワークを選択することもできますし、JavaScriptだけを使用して実装することもできます。
このチュートリアルでは、ユーザ名検証ツールを作成するために、Django でどのように AJAX リクエストとレスポンスを処理できるかを探ります。シンプルにするために、関数ベースのビューと jQuery を使用する予定です。

1. プロジェクトの初期化
   Django でプロジェクトを作成するに

$ django-admin startproject exampleajax

After creating a project you need to create a app:

$cd exampleajax
$python manage.py start ajaxpost

2. モデルの作成
   django でモデルを作成するには、ajaxpost ディレクトリに移動して models.py を開いてください。まず、ajaxform テーブルを作成します。ajaxform テーブルを作るには、以下のように記述します。

Class Account (models.Model):
    username=models.Charfield (max_length=100)
    email=models.EmailField (max_length=100)
    password=models.Charfield (max_length≒100)

    Def __str__(self):
	Return str(self.username)

モデル作成後、マイグレーションを行うadmin.pyでモデルの登録と使用

$python manage.py makemigrations
$python manage.py migrate

from django.contrib import admin
from .models import *
   admin.site.register(Account)
   @admin.register(Account)
   class AccountAdmin(admin.ModelAdmin):
       list_display = ('username', 'email')

3. urls の作成 urls.py
   django で urls を作成するには、ajaxpost ディレクトリに移動して urls.py を開いてください。

from django.urls import path
from .import views
     urlspatterns=[
	path('',views.index,name="index"),
     ]

4. ビューの作成
   Django でビューを作成するには、 ajaxpost ディレクトリに行き、 views.py を開きます。views.py ファイルには、Web アプリケーションで定義した URL を通してデータを提供するために使用される様々なメソッドが含まれています。

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
	Return render(request,’index.html’)

5. html テンプレートの作成
   htmlの部分には、ユーザーのためのUIが含まれています。ここでは、3つの入力フィールドと送信ボタンを作成します。フォームを使用する場合は、フォーム内にcsrf_tokenを含める必要があります。

<form id=”ajax-form” method=”POST”>
{%csrf_token%}
<input type="text" class="form-control" name="username" id="username" placeholder="username"/>
<input type="email" class="form-control" name="email" id="email" placeholder="email"/>
<input type="password" class="form-control" name="password" id="password" placeholder="password"/>
<button type="submit" id="saveBtn" class="btn btn-primary">save</button>
</form>

6.AJAXリクエストの作成:
ユーザー名がすでに使われているかどうかをチェックするためのAJAXリクエスト . usernameフィールドのidを使用し、そのchangeイベントに対するリスナーを追加します。
イベントが正しく発生すること、そしてリスナーを正しく設定したことを確認してください。ここでは、AJAX POST メソッドを使用して、ビューにリクエストを送信します。
POST リクエストの作成

//get the user input id
$("#username").change(function () {
        var username = $(this).val();  
        });
        $.ajax({
        url: 'validate',
        method: 'POST',
        data: {
          'username': username
        },
        headers: {"XCSRFToken":document.querySelector('[name=csrfmiddlewaretoken]').value,
            }
        dataType: 'json',
        success: function (data) {
          if (data.taken) {
            alert("Username has already taken");
          }
        }
      });
    });

では、urls.pyとviews.pyにそれぞれのURLとメソッドを追加してみましょう。
urls.py

from django.urls import path
from . import views
urlpatterns = [
    path('',views.index,name="index"),
    path('example',views.example,name="example"),
]

views.py

from django.contrib.auth.models import User

def example(request):
    username = request.POST['username']
    data = {
        'taken': User.objects.filter(username__iexact=username).exists()
    }
    return JsonResponse(data)