【Django】№01.テンプレート表示した現在時刻をAjaxで毎秒自動更新させる

経緯

・Djangoで勤怠打刻ページを作る際、現在時刻をテンプレートタグ{% now "H:i:s" %}を使って表示していた。
・でもこの場合、テンプレートを表示させた瞬間の現在時刻が表示されたままとなってしまう。
・そこで、javascriptで現在時刻を取得してカウントアップしていく方法をとったが、やはりサーバーから現在時刻を取得して、毎秒テンプレートに現在時刻を表示させるという方法に変更したい。となった。

今回採用した方法と条件

・Ajaxを使用して現在日時を毎秒サーバーから取得してテンプレートに表示させる方法。
・現在日時の表記方法は日本語表記（2020年08月30日　日曜日　15:31:20）にする。
・テンプレートに表記する時、”2020年08月30日 日曜日”　と　"15:31:20”　は、それぞれにCSS装飾を行える形とする。

手順①　Ajax通信先の処理viewを１つ作る

参考）https://qiita.com/kakimochi/items/4e95c9e4d1e4b00ec05a

record_app/views.py

#　ajax用view
class c_AjaxView(View):
    def get(self, request):
        dt_now = datetime.datetime.now()
        return HttpResponse(dt_now,request)
i_ajax = c_AjaxView.as_view()

ここで作ったのは｢i_ajax｣という名前のクラスView。
datetime.nowで現在時刻を取ってきて、dateformat.formatで表示させたい表記方法を指定。
それを変数に入れて、HttpResponseで返すという処理。
この結果がテンプレートに表示されるようになる。
 

 

手順②　アプリ側のurls.pyに、i_ajaxを指定する

record_app/urls.py

#　下記１行を追加
path('i_ajax/',views.i_ajax,name='i_ajax'),

④で通信先のurlを指定するので、この設定が必要

 

手順③　テンプレートの時刻を表示させたい場所にdivを設置

record_app/templates/record_app/test.html

<div id="datetime_auto" style="text-align:center;"></div>

ここに、現在時刻が表示されるようになる。
このdivにidを付与しておく。
今回は、datetime_autoという名前のidとした
 

 

手順④　テンプレートの　body閉じタグ直前に、Javascriptを記載する

record_app/templates/record_app/test.html

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        function get_time() {
            // Ajax通信処理
            $.ajax({
                // リクエスト送信先URLの設定
                url: '{% url "record_app:i_ajax" %}',　　# ここで、i_ajaxViewを呼び出している。
                // 非同期通信フラグ（trueは非同期）
                async: true,
                // Ajax通信成功時にレスポンスデータ受け取り&処理実行
                success: function(data) {　　　　　　　　
                    document.getElementById("datetime_auto").innerHTML = data;
                }
            });
        }
        // 1秒ごとに実行する
        $(document).ready(function() {
            setInterval(get_time, 1000);
        });
    </script>

javascriptで実行させている処理は下記のとおり。
・Ajax通信したいクラスview(①)のurlを指定
・その通信に成功したら
・③のidに結果を返す
・この処理を１秒ごとに実行する

 

ここまでの実装で、ブラウザでは下記のように表示されるようになりました♪

秒数が１秒ごとに最新に自動更新されて表示されます。

「2020/08/30　15:30:589762」

 
 
ですが、本当は･･･
「2020年08月30日　日曜日　15:31:20」という表示にしたいので、ここから少しカスタマイズさせていきます。
『現在時刻datetime.nowの表示方法をview内で変更してテンプレートに表示させる』に続く。