DjangoでAjax処理を行う方法（GET／POST）

確認飛行物体

5年前

DjangoでAjax処理を行う方法（GET／POST）をご紹介します。

1 条件
2 urls.py
3 views.py
4 テンプレート
- 4.1 detail.html（詳細画面）
5 実行結果
6 サンプルソース
7 参考
- 7.1 Qiita：JavascriptのAjaxについての基本まとめ
- 7.2 小粋空間：jQuery.ajax()のまとめ

条件

Python 3.7.0
Django 2.2.3

urls.py

トップ画面に一覧画面を表示し、詳細画面を表示するという動作とします。
詳細画面でボタンクリックを行い、同画面でGET／POST結果の表示を行います。

from django.urls import path
from . import views

app_name = 'sample'

urlpatterns = [
    # トップ画面
    path('', views.IndexView.as_view(), name='index'),

    # 詳細画面
    path('sample/<int:pk>/', views.DetailView.as_view(), name='detail'),

    # Ajax処理
    path("sample/<int:pk>/exec/", views.exec_ajax, name='exec'),
]

このソースでのポイントは、Ajax処理用のパス「sample/<int:pk>/exec/」を設定していることです。
詳細画面にてボタンが押された際「sample/<int:pk>/exec/」にGET／POSTを行い、views.exec_ajaxで処理を実行します。

views.py

from django.http import HttpResponse
from django.views import generic
from .models import Location, WeatherData
import logging


logger = logging.getLogger('development')


class IndexView(generic.ListView):
    model = Location
    paginate_by = 5
    ordering = ['-updated_at']
    template_name = 'sample/index.html'


class DetailView(generic.DetailView):
    model = Location
    template_name = 'sample/detail.html'


def exec_ajax(request, pk):

    if request.method == 'GET':  # GETの処理
        param1 = request.GET.get("param1")  # GETパラメータ1
        param2 = request.GET.get("param2")  # GETパラメータ2
        param3 = request.GET.get("param3")  # GETパラメータ3
        logger.debug(param1 + param2 + param3)
        return HttpResponse(param1 + param2 + param3)

    elif request.method == 'POST':  # POSTの処理
        data1 = request.POST.get("input_data")  # POSTで渡された値
        logger.debug(data1)
        return HttpResponse(data1)

exec_ajaxでは、詳細画面でボタンを押した際に実行されたGETパラメータ／POSTの値を取得します。
GETとPOSTで処理を切り分け、HttpResponseを返します。

テンプレート

detail.html（詳細画面）

{% extends 'base.html' %}

{% block content %}

    <section class="col-lg-8 offset-lg-2">
        <h1>{{ object.name }}</h1>
        {{ object.memo|linebreaksbr }}

        <hr>

        <!-- GET -->
        <button id="button1" type="button">GETボタン</button>
        <div id="resultGET"></div>

        <hr>

        <!-- POST -->
        <form name="name_form1" action="{% url 'sample:exec' object.pk %}" method="POST">
            {% csrf_token %}
            <input type="text" name="input_data" value="POSTのデータ">
            <input class="btn" type="submit" value="POSTボタン">
        </form>
        <div id="resultPOST"></div>

        <script>
            $('#button1').on('click', function(){
                $('#resultGET').text('通信中...');
                // Ajax通信を開始
                $.ajax({
                    url: "{% url 'sample:exec' object.pk %}",
                    method: "GET",
                    // プレーンテキストを受信（他にはhtml、xml、script、json、jsonp等）
                    dataType: 'text',
                    // リクエストパラメータ「?param1=いろはに&param2=ほへと&param3=ちりぬるを」
                    data: {
                        param1: 'いろはに',
                        param2: 'ほへと',
                        param3: 'ちりぬるを '
                    },
                    timeout: 5000,
                })
                .done(function(data) {
                    // 通信成功時の処理を記述
                    $('#resultGET').text('GET処理成功：' + data);
                })
                .fail(function() {
                    // 通信失敗時の処理を記述
                    $('#resultGET').text('GET処理失敗.');
                });
            })

            $("form").submit( function(event) {
                event.preventDefault();
                var form = $(this);
                $('#resultPOST').text('通信中...');
                // Ajax通信を開始
                $.ajax({
                     url: form.prop("action"),
                     method: form.prop("method"),
                     data: form.serialize(),
                     timeout: 5000,
                     dataType: "text",
                })
                .done( function(data) {
                    // 通信成功時の処理を記述
                    $('#resultPOST').text('POST処理成功：' + data);
                })
                .fail(function() {
                    // 通信失敗時の処理を記述
                    $('#resultPOST').text('POST処理失敗.');
                });
            });
        </script>

        <p><a href="javascript:history.back()">&lt; Back</a></p>
    </section>

{% endblock %}

例として、GET／POSTの場合、それぞれで以下のタグのテキストを更新するという処理を行います。

GETの場合：<div id=”resultGET”></div>
POSTの場合：<div id=”resultPOST”></div>

スクリプトでは、以下の個所がテキスト更新処理です。

.done(function(data) {
    // 通信成功時の処理を記述
    $('#resultGET').text('GET処理成功：' + data);
})

.done( function(data) {
    // 通信成功時の処理を記述
    $('#resultPOST').text('POST処理成功：' + data);
})