投稿日：2019年10月21日｜最終更新日: 2019年10月20日

【Django】inputタグでAjaxする【Python】

Django Python

DjangoでAjaxを実行します。Inputに入力した値を画面の更新なしに同じページに表示してみます。

DjangoでAjax
仕様
準備
Ajaxアプリ概要
urlの設定
viewの追加
templateの作成

DjangoでAjax

Ajaxとは「Asynchronous JavaScript + XML」の略です。Asynchronousとは、「非同時性の、非同期の」という意味です。つまりは、Django内で「JavaScriptとXMLを使って非同期にサーバとの間の通信」を行います。

仕様

inputの入力欄に数値を入力し、「送信」ボタンを押します。すると、ページを更新せずにページの内容を変更することができます。

準備

当サイトでは、Vagrantでゲスト環境（仮想環境）を作ってDjangoを動かいていますが、それ以外の環境でも操作方法はだいたい同じです。

①Djangoプロジェクトを生成します。

→VagrantのDjangoで作るWebアプリケーション(その1 プロジェクト生成)

②Djangoアプリケーションを作ります。

→VagrantのDjangoで作るWebアプリケーション(その2 プロジェクトの初期設定)

環境

OS	CentOS 7.1.1503
Python	3.6.5
pyenv	1.1.3-5-g7dae197
mod_wsgi	4.5.14
Django	2.0.3

Ajaxアプリ概要

①以下のようなDjangoアプリ構成を作ります。プロジェクト名が「pj1」で、アプリケーション名が「users」です。プロジェクトの設定は済ませたものとします。赤字のファイルは、今回変更する部分です。

pj1/
pj1/
__init__.py
settings.py
urls.py
wsgi.py
users/
__init__.py
admin.py
apps.py
urls.py
views.py
models.py
templates/test_ajax_app/test_ajax_app.html

urlの設定

まず、usrs（アプリケーション）ディレクトリのurls.pyを記述した後、pj1（プロジェクトディレクトリ）のurls.pyも記述します。

pj1/
pj1/
urls.py
〜省略〜
users/
urls.py
〜省略〜
templates/test_ajax_app/test_ajax_app.html

①usersディレクトリのurls.pyに以下の内容を記述します。（url名は任意です。）

from django.conf.urls import url

from . import views

app_name = 'users'

urlpatterns = [
    # Ajax
    path("test_ajax_app/",views.test_ajax_app),
    path("ajax/", views.test_ajax_response),
]

②pj1ディレクトリのurls.pyに以下の内容を記述します。

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^', include('users.urls', namespace = 'users')),  # urlと他のurlpatternsとの結びつけ
]

viewの追加

formからURLとして呼ばれると、処理を渡すpyファイルまでルーティングします。

①usersディレクトリのviews.pyに以下の内容を記述します。

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

import json

def test_ajax_app(request):
    hoge = "Hello Django!!"

    return render(request, "test_ajax_app/test_ajax_app.html", {
        "hoge": hoge,
    })


def test_ajax_response(request):
    input_text = request.POST.getlist("name_input_text")
    hoge = "Ajax Response: " + input_text[0]

    return HttpResponse(hoge)

解説

formを送信されたら、なにか処理して、HTMLをレンダリングして返します。

def test_ajax_response(request):
    input_text = request.POST.getlist("name_input_text")
    hoge = "Ajax Response: " + input_text[0]

    return HttpResponse(hoge)

serialize()されて、ajaxで送信されてきたデータは、下記のrequestに格納されてます。

    input_text = request.POST.getlist("name_input_text")

name_input_textというnameを持ったinputタグに入力されたデータは、上記で取り出すことができます。

    return HttpResponse(hoge)

そして、部分的なHTMLとして返すには、HttpResponse()を使います。

templateの作成

①test_ajax_app/test_ajax_app.htmlを作成してします。

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">

    <style type="text/css">
        table.dataTable {
            /* Fix misalignment header */
            margin: unset;
        }
    </style>

    <title>Test Ajax App</title>
</head>

<body>
    <h1>Test Ajax App</h1>

    <form name="name_form" action="/ajax/" method="POST">
        {% csrf_token %}
        <input type="text" id="id_input_text" name="name_input_text" value="999.99">
        <input class="btn" type="submit">
    </form>

  <span id="id_div_ajax_response">
      AJAX RESPONSE
    </span>

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <!--  datatables js -->
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
    <!-- column visible -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <!-- save as csv-->

    <!-- moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

    <script>
        $("form").submit( function(event) {
        event.preventDefault();
        var form = $(this);
        $.ajax({
          url: form.prop("action"),
          method: form.prop("method"),
          data: form.serialize(),
          timeout: 10000,
          dataType: "text",
        })
        .done( function(data) {
          alert("done");
          $("#id_div_ajax_response").text(data);
        })
      });
    </script>
</body>
</html>

解説

  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

jQueryが必要ですので呼び出します。

Ajaxを使う場合は、slimではない方を呼び出す必要があります。

$("form").submit( function(event) {
        event.preventDefault();
        var form = $(this);
        $.ajax({
          url: form.prop("action"),
          method: form.prop("method"),
          data: form.serialize(),
          timeout: 10000,
          dataType: "text",
        })
        .done( function(data) {
          alert("done");
          $("#id_div_ajax_response").text(data);
        })
      });

送信ボタンを押した後、上記のJqueryの処理を実行します。

      $("form").submit( function(event) {

formのsubmitイベントをここで処理します。

        event.preventDefault();

デフォルトのform操作を一時的に防止します。

        $.ajax({
          url: form.prop("action"),
          method: form.prop("method"),
          data: form.serialize(),
          timeout: 10000,
          dataType: "text",
        })

ajaxの設定を行います。

url	formタグのactionプロパティをセットします。なので、”/ajax/”が格納されます。
method	methodプロパティ（今回はPOST）を設定します。
data	serialize()は、formタグ内の送信されるデータ同士を結合します。例)AAA&BBB&CCC

form.serialize() + “&” + “DDD” みたいに文字列結合しても一緒に送信できます。

        .done( function(data) {
          alert("done");
          $("#id_div_ajax_response").text(data);
        })

Pythonから返ってきた部分的なHTMLは、上記のdataに格納されて返ってきます。

トラックバック用のURL

プロフィール

名前：イワサキ　ユウタ職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア誕生：1986年生まれ出身：静岡県特技：ウッドベース略歴 20