スポンサードリンク



こんにちは。sinyです。

この記事ではDjangoでAjaxを利用する際の基本的なナレッジについてまとめました。

下図のように「いいね」ボタンを押した際にAjaxでボタン要素だけを書き換えて色を変えるという事例で解説していきます。

 

事前準備

まず、仮想環境とDjangoプロジェクト、アプリケーションを作成します。

 

Djangoをインストールしておきます。

 

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

 

続いてアプリケーション作成を作成します。

 

settings.pyにアプリケーション(post)を追加します。

 

モデルの作成

ここでは「投稿」と「いいね」ができるモデルを作成します。

post/models.pyに以下のコードを記載します。

 

ビューの作成

post/views.pyに以下のコードを記載します。

1つ目はすべての投稿をレンダリングするIndex関数で、2つ目はいいね機能を提供するlike関数です。

 

like関数は、いいねボタンからのAJAXリクエストを処理するために利用します。

like関数は、最初にリクエストを受け取り GETメソッドの場合は、データを読み取ります。
ここで受け取るデータは、いいね対象の投稿IDです。

Likeクラスオブジェクトを作成し、そのデータと一致するIDをデータベースに保存します。

最後に、HttpResponseを返します。

 

テンプレートの作成

tutorial\post\templates\postディレクトリを作成しindex.htmlを以下の通り作成します。

 

このHTMLファイルには2つの重要な部分があります。

jQueryとBootstrapのインポート

 

jQueryはJavaScriptライブラリーであるため、本質的にサーバーの静的ファイルです。
Bootstrapや他のファイルと同じようにインポートできますが、ここではCDN経由で利用します。

リンクはjQueryの公式Webサイトにあります。

スリム版はajaxメソッドを使えないので注意。

 

 

JavaScriptからのAJAXリクエストの生成

 

index.htmlの最後にある<script> </ script>にAJAXを定義しています。

 

以下のコードは、likebuttonクラスの要素がクリックされた場合にfunction()以下の処理を実行するというコードです。

 

id = $(this).attr("data-catid")でdata-catid="{{ post.id }}"で設定されているPOST記事のID番号を取得しています。

 この辺はjQueryの基礎知識がないと理解できないと思いますので、良くわからない人はまずはjQueryの基礎を勉強しましょう。

以下の書籍などがお勧めです。

created by Rinker
¥3,168 (2020/08/04 18:41:52時点 楽天市場調べ-詳細)

 

jQueryでAjax通信の基本的な機能を提供するのが$.ajaxメソッドです。

ajaxメソッドを定義している部分が以下です。

 

ajaxメソッドにはいろんなオプションがありますが、ここでは以下を指定しています。

ajaxメソッドのオプション
  • type:使用するHTTPメソッド(GET | POST)  ※デフォルトはGET
  • url:通信先のURL
  • data:送信するデータ(ハッシュ形式)
  • success:通信成功時に実行するCALLBACK関数(引数は、応答データ、ステータス文字列、XMLHttpRequest)

 

typeにGETを指定しています。

dataにはPOSTクラスのIDを指定します。

data:{ post_id: id }

ajax通信が成功した場合は以下の関数を実行します。

 

関数内では以下の2つの処理を実行させます。

  1. id="like{{ post.id }}"に割り当てられているbtn btn-primary btn-lgクラスを削除
  2. id="like{{ post.id }}"に割り当てられているbtn btn-success btn-lgクラスを追加

 

URLの設定

 

 post/urls.pyを新規作成し以下のコードを記載します。

 

プロジェクト直下のurls.pyに以下を追加します。

 

admin.pyの設定

 

post/admin.py に以下の設定を追加します。

 

ここまできたら、一旦マイグレーションを実行します。

 

開発サーバを起動してadminページにアクセスします。

 

Postテーブルにいくつか投稿を登録したあと以下のURLにアクセスします。

http://127.0.0.1:8000/ajax/

以下のような非常にシンプルないいねボタン機能が付いたブログ画面が表示されます。

 

いいね!」ボタンを押すと、下図の通りボタンの色が変わります。

画面全体の更新がされるのではなく、Ajaxの処理によって「いいね」ボタン部分に設定されているクラスが「btn btn-primary btn-lg→btn btn-success btn-lg」に書き換えられボタン部分だけが更新されることがわかると思います。

 

ちなみに、「いいね」ボタンを押すとPOSTテーブルのIDに対応するLIKEテーブルのレコードが自動的に生成されます。

このチュートリアルでは、DjangoのAJAXについて簡単に説明しました。

 

 

おすすめの記事