今日よりちょっと賢い明日、今よりずっと自由な未来

Liberal Arts & IT

IT

Djangoでforms.pyとajaxを使う[HTML+JavaScript+Python]

投稿日:

forms.pyを使って作ったフォームの入力内容をViewsで使う方法は分かる。
JavaScriptで計算した内容をAjaxでViewsに渡す方法も分かる。
でもフォームとJavaScriptの計算結果を同じボタンでViewsに渡す方法が分からない。。。

ということで、formの内容をJavaScriptで取得してまとめてAjaxで送るという方法をとったので記録します。

やりたいこと

この状態でStop&Submitボタンを押したら、modelsにTaskとDetailsとストップウォッチで測っている時間が登録され、画面下の表に追加される、という形にしたいです。

HTML

forms.pyを使っています。
普通ajaxを使う時には要素にidを付与しますが、Djangoのformsを使った場合は、、、Djangoが勝手にidを付与してくれるようです。

JavaScript

ストップウォッチに関する部分は完全にこのサイトからいただきました。
コピペコピペで作った結果、Jqueryの記述とJavaScriptの記述が混ざっていますが、、、動くので良しとします。

formsを使った時にDjangoが付与してくれていたid、「id_detail」を指定してフォームに入力された内容を取得します。

それをJavaScriptで作ったストップウォッチの時間と合わせてajaxで送信しています。

ajaxはformと違ってリロードせずに値を渡すことができますが、今回はSubmitした結果をmodelsに登録して、すぐに画面上の表に反映させたいので、あえてリロードさせています。

views.py

ajaxでPOSTされたデータは、

で取得できます。

あとはmodels.pyで定義したTask()に保存するだけ。

非同期通信がしたいわけではないので、ajaxを使わずに普通にPOSTする方法もあるんじゃないかと思いました。
JavaScriptからデータ送信するならajax、というイメージがあって今回はこれだけにしてしまいましたが、、、

-IT

Copyright© Liberal Arts & IT , 2021 All Rights Reserved Powered by STINGER.