[Django]DjangoでHTMLとViews.pyでデータを受け渡しする

Django

今回は「Django」で「HTML」ファイルと「Views.py」ファイルでデータを受け渡しする方法を見ていきます。

これを学ぶことで、自分の思い通りにデータを扱うことができ、アプリ開発の幅を広げることができます。

中級者向けの知識なので、「Djangoまだ初心者だよ...」という方は以下の記事などを参考にして、基礎部分の知識をつけてから読んでください!

[Django初心者]DjangoでTodoリストを作成する

早速見ていきましょう!

ファイル用意

まずは今回解説に使用するファイルを用意します。

(*実際の動きは確認しないので、参考にしながら自分のアプリに取り入れてください。)

今回は、「HTML」ファイルにユーザーが入力した情報を「Views.py」で受け取り、それを再び「HTML」ファイルに表示していきたいと思います。

入力用HTMLファイル

まずは、入力用の「HTML」ファイルを用意していきます。

以下のようなファイルを使います。

.
.
.
<form action="{% url '~' %}" method="post">
    {% csrf_token %}
    <div class="field">
        <label>入力1</label><input type="text" name="nyuryoku1" id="nyuryoku1">
        <label>入力2</label><input type="text" name="nyuryoku2" id="nyuryoku2">
        <label>入力3</label><input type="text" name="nyuryoku3" id="nyuryoku3">
    </div>
    <input type="submit" value="送信">
</form>
.
.
.

順に解説していきます。

<form action="{% url '~' %}" method="post">
.
.
.
</form>

これはデータを登録する部分です。

この「form」の中に入力したものを「views.py」に渡すことができます。

post」通信というのはデータを登録するようの通信くらいの理解で大丈夫です。

{% url ‘~’ %}」の「~」にマッチする「urls.py」の「views.py」に入力データが渡されます。

{% csrf_token %}

これはセキュリティ強化のためのものです。

特に気にしなくて良いです。

 <div class="field">
    <label>入力1</label><input type="text" name="nyuryoku1" id="nyuryoku1">
    <label>入力2</label><input type="text" name="nyuryoku2" id="nyuryoku2">
    <label>入力3</label><input type="text" name="nyuryoku3" id="nyuryoku3">
</div>

ここに「views.py」に渡したデータを入力できます。

HTML」ファイルでは入力部分が表示されるので、そこに入力できます。

input」の中での「name」で指定した名前を「views.py」で使用します。

<input type="submit" value="送信">

ここはボタンになっています。

このボタンを押すことで、先ほど入力したデータを持ったまま、「form」で指定したURLとマッチする、「urls.py」に登録された「views.py」にデータが渡されます。

具体的な動きが確認できないので、説明がわかりにくくても申し訳ないです…。

views.pyファイル

では次にデータを受け取る「views.py」を用意しましょう。

def get_nyuuryoku(request):
    message = 'データ受け取ったよ!'
    if request.method == 'POST':
        nyuryoku1 = request.POST['nyuryoku1']
        nyuryoku2 = request.POST['nyuryoku2']
        nyuryoku3 = request.POST['nyuryoku3']

        params = {
            "nyuryoku1": nyuryoku1,
            "nyuryoku2": nyuryoku2,
            "nyuryoku3": nyuryoku3,
            "message": message,
        }

        return render(request, '~', params)

これも1つずつ解説していきます。

def get_nyuuryoku(request):

ここでは関数の定義をしています。

get_nyuuryoku」という名前にしています。

request」は「HTML」ファイルから送信されたデータを受け取ってくれます。

message = 'データ受け取ったよ!'

これはただの変数です。

後で表示用の「HTML」で表示するためのものなので、気にしないでください。

if request.method == 'POST':

これは「post」通信で送られてきたかどうかを判断する条件分岐です。

nyuryoku1 = request.POST['nyuryoku1']
nyuryoku2 = request.POST['nyuryoku2']
nyuryoku3 = request.POST['nyuryoku3']

ここでは先ほど「HTML」ファイルで入力した時の、「input」の「name」を使ってデータを取得しています。

そのデータをそれぞれ変数に格納しています。

params = {
    "nyuryoku1": nyuryoku1,
    "nyuryoku2": nyuryoku2,
    "nyuryoku3": nyuryoku3,
    "message": message,
}

ここでは「HTML」ファイルにデータを渡し、データを表示する時の名前を指定します。

表示用「HTML」ファイルで「nyuryoku1」と書き込んでおけば、入力用「HTML」ファイルの「name」が「nyuryoku1」で入力されたものを表示してくれるようになります。

これらを辞書として「params」に格納しています。

return render(request, '~', params)

ここでは次に表示する「HTML」ファイルを指定しています。

表示用「HTML」ファイルを「~」に指定して、「params」で格納してあるデータをまとめて渡しています。

表示用HTMLファイル

.
.
.
<div class="field">
    <h4>{{ nyuryoku1 }}</h4>
    <h4>{{ nyuryoku2 }}</h4>
    <h4>{{ nyuryoku3 }}</h4>
    <h4>{{ message }}</h4>
</div>
.
.
.

最後はめちゃくちゃシンプルですね。

先ほど「views.py」の「params」で指定した名前を「{{ }}」の中に入れることで、入力されたものを表示することができます。

最後に

今回はDjango」で「HTML」ファイルと「Views.py」ファイルでデータを受け渡しする方法を見てきました。

具体的に動きを確認できなかったので、わかりにくかったと思います。

今後実際の動きを確認できるようにアップデートしていこうと思うので、待っていてください!

何か質問などがあれば下のTwitterのDMを送るか、ここのコメントで聞いてください!

それでは!

コメント

タイトルとURLをコピーしました