【Django】Ajax：サーバーからクエリセットを送信・クライアントで受け取る方法

2023.06.06 / 2023.06.06

本記事ではDjangoで作成したWebアプリケーションで、Ajaxの非同期通信でサーバーからクエリセットを送信し、クライアントで送信されたクエリセットを受け取る方法について詳しく解説していきます。

Ajaxを使いこなせるようになるとWebアプリケーションで実現できることが大きく広がります。ビューで生成したクエリセットをクライアント側にJSON形式で送信できれば、様々なデータをページ遷移なしで変更できるようになります。

ぜひ本記事を通して、Ajaxによるクエリセットのデータのやり取りについて理解を深めてください。

Django：Ajaxによる非同期通信について

Ajaxはページの読み込み（ページ遷移）を行わずにサーバーと通信を行う非同期通信を行う技術です。Ajaxを用いることでページ読み込みをせずに、サーバーから受け取ったデータを元に動的にページの一部を変更することができます。

多くのWebアプリケーションでAjaxは組み込まれており、DjangoでもAjaxを簡単に利用することができます。DjangoでAjaxを利用する方法について詳しくは以下記事をご参照ください。

Ajaxでサーバーとデータのやり取りを行う場合、単一のデータであれば難しい記述なくサーバーからクライアントへデータ送信ができ、クライアント側でも簡単にデータを受け取ることができます。

# views.py
# Ajaxを通してサーバーからデータを送信する
def ajax_from_server(request):
    number1 = int(request.POST.get('number1'))
    result = number1 * 100
    d = {
        'result': result,
    }
    return JsonResponse(d)

// jQuery
// サーバーから送られたデータを受け取る
$.ajax({
    'url': '{% url "ajax_from_server" %}',
    'type': 'POST',
    'data': {
            'number1': $('#number1').val(),
    },
    'dataType': 'json'
})
.done(function(response){
    $('.result').prepend('計算結果：' + response.result + '');
});

ではクエリセットをサーバーからクライアントに送りたい場合、どのようにサーバーから送信し、クライアント側で受け取ることができるのでしょうか。次項よりその方法を詳しく解説していきます。

サーバーからクエリセットを送信・クライアントで受け取る方法

サーバーからクエリセットを送信し、クライアントで受け取る方法について解説していきます。

DjangoでAjaxによる非同期通信でクエリセットの送信・受け取りを行うシステムの作成手順は以下の通りです。

jQuery： AjaxでAjaxリクエストをサーバーに送信
ルーティング（urls.py）：URLパターンの設定
ビュー（views.py）：Ajaxリクエストを処理し、クエリセットをJSON形式で返す
jQuery：JSON形式で返ってきたデータを処理

上記の各流れについて詳しく解説していきます。

１．jQuery： AjaxでAjaxリクエストをサーバーに送信

まずAjaxでサーバーにリクエストを送信します。ここではjQueryを使用し、HTMLをすべて読み込んだ後（DOM構築後）にAjaxでサーバーにリクエスト送信をしています。

<script>
・・・

$(function(){
    $.ajax({
        'url': '{% url "office:ajax_request " %}',
        'type': 'POST',
        'data': {
            'text' : 'テスト',
        },
        'dataType': 'json'
        })
        // 成功時の処理を以下に記入
・・・
});
</script>

Ajaxでのデータのやり取りはJSON形式です。JSONはAjaxにおいて必須の知識なので、知らない方は以下記事を確認しておきましょう。

２．ルーティング（urls.py）：URLパターンの設定

クライアントからAjaxで送られてきたAjaxリクエストを処理するためのURLパターンをurls.pyに記述します。

# urls.py
from django.urls import path
from . import views

app_name = 'office'

urlpatterns = [
・・・
path('ajax-request', views.ajax_request, name='ajax_request'),
・・・
]

urls.pyへのルーティング（URLパターン）の記入方法については以下記事をご参照ください。

３．ビュー（views.py）：Ajaxリクエストを処理し、クエリセットをJSON形式で返す

ビュー（views.py）にはAjaxリクエストを処理し、クエリセットをJSON形式でクライアントに返す処理を記述します。

# views.py
from django.http import JsonResponse
from .models import ModelName

def ajax_request(request):
    try:
        objs =ModelName.objects.filter(…)
        data = [{'id':obj.id, 'date':obj.date} for obj in objs]
    except Exception as e:
        data = None
    return JsonResponse(data, safe=False)

４．jQuery：JSON形式で返ってきたデータを処理

最後に再度jQueryでサーバーから返ってきたJSONデータを処理します。

.done(function(response){
    console.log(response);
    for (var i = 0; i < response.length; i++) {
        var obj = response[i];
        var add_contents = '<p>' + obj.date + '</p>';
        $('#office').append(add_contents)
    }
});

上記のようにforループで返り値responseを回すことで、クエリセットのデータすべてをHTML要素に挿入する等が可能となります。

サーバーから複数のクエリセットを送信・クライアントで受け取る方法

ビューで複数のクエリセット生成し、JSON形式でクライアントに返すこともできます。例えば以下のようにビュー（views.py）の関数で複数のクエリセットを生成し、JSON形式で返すとします。

# views.py
def ajax_request(request):
    objs =ModelName.objects.filter(...)
    data1 = [{'id': obj.id, 'date': obj.date } for obj in objs]

    objs2 = ModelName2.objects.filter(...)
    data2 = [{'id': obj.id, 'date': obj.date } for obj in objs2]

    result = {
        'data1': data1,
        'data2': data2,
    }
    return JsonResponse(result)

クライアント側で上記JSONデータを受け取って処理するには以下のようにコードをjQueryで記述します。

.done(function(response){
    var result1 = response.data1;
    var result2 = response.data2;
    console.log(result1);
    console.log(result2);
    for (var i = 0; i < response.length; i++) {
        var obj1 = result1[i];
        var obj2 = result2[i]:
        var add_contents = '<p>' + obj1.date + '</p>';
        add_contents += '<p>' + obj2.date + '</p>';
        $('#office').append(add_contents)
    }
});

上記のようにすれば複数のクエリセットのデータもクライアントに送信できます。