Q&A
change_colorの動きはどうなってるんでしょうか
前提・実現したいこと
現在，djangoを用いてゲームを作成しています．
実装したい機能は以下の通りです．
・game.htmlに色が塗られた図形の画像と，色の名前が書かれたボタンが存在する．
・プレイヤーはそのボタンを好きなタイミングでクリックできる．
・ボタンがクリックされると，非同期的に図形の色を変更するメソッドを呼び出す．
また，ゲームの仕様は以下のようになっています．
・ゲーム内の他のメソッドによって，プレイヤーの操作以外でも図形の色は変化する．（CPUによる操作のイメージ）
・図形の色の変化を反映するため，一定時間ごとに画像を読み込む,またはページをリロードする．（現在はページ全体をリロードする形にしています）
発生している問題・エラーメッセージ
色の名前が書かれたボタンはform内に3つ配置し，postメソッドで送信しているのですが，1度ボタンによって情報を送信すると，以下のような確認のポップアップが出てしまいます．
このページを表示するにはフォームデータを再度送信する必要があります。フォームデータを再送信すると以前実行した検索、投稿や注文などの処理が繰り返されます。
試したこと
ajaxによって非同期的なボタンの処理を実装しようとしましたが，確認のポップアップを回避することはできませんでした．
該当のソースコード
views.pyのajaxによって呼び出したいメソッド
python3
1def ajax_color_change(request): 2 if request.is_ajax: 3 if 'red' in request.POST: 4 color = 'red' 5 change_color(num, color) 6 elif 'blue' in request.POST: 7 color = 'blue' 8 change_color(num, color) 9 elif 'green' in request.POST: 10 color = 'green' 11 change_color(num, color) 12 13shapes = {0:'red',1:'blue',2:'green'} # 実際のコードと定義の方法とは違いますが，このように図形の色を記録した辞書が存在しています． 14 15# 実際のコードとは異なりますが，色の変え方は実際のものと同じです． 16def change_color(num, color): 17 shapes[num] = color
game.html
html
1{% extends 'coloring/base.html' %} {% block title %} game {% endblock title %} 2{% block contents %} 3 4<script src="https://code.jquery.com/jquery-3.5.0.js" 5 integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" 6 crossorigin="anonymous"></script> 7<script type="text/javascript"> 8 $(function(event) { 9 $('button').click(function() { 10 event.preventDefault(); 11 $.ajax({ 12 url: "ajax_color_change", 13 }) 14 .done( function() { 15 alert("done"); 16 }) 17 }); 18 }); 19</script> 20 21<script>setTimeout("location.reload()", 1000)</script> 22<div id="network"> 23 <img src="{% url 'coloring:ones_network' node_num %}" 24 alt="表示できません．" width="800" height="600" /> 25 <form name="color_button" method="POST"> 26 {% csrf_token %} 27 <button name="red">赤</button> 28 <button name="blue">青</button> 29 <button name="green">緑</button> 30 </form> 31</div> 32 33{% endblock contents %} 34
諸用により，実際に記述しているコードとは異なるものを記述しています．
なるべく実際の状況に近づくように記述していますが，わかりづらい点などがございましたら随時編集点をご指摘いただければと存じます．
お手数をおかけしますが，何卒よろしくお願いいたします．
補足情報（FW/ツールのバージョンなど）
iMac 10.15.7
python 3.8.2
djagno 3.1.2
change_colorの内容を追記させていただきました．
ご確認いただけますと幸いです．
ajax_color_changeの返り値はどうなるんでしょうか？
Ajax通信後にリロードされても色ボタンの影響がないと思われるんですがどうお考えですか
通常であればajax_color_changeの返り値をdoneで受け取りJSで動き(色変化)を表現するモノだと思うのですが
申し訳ございません．
ajaxに今回初めて触れたものでして，理解が追いついていないまま手探りでコーディングをしている状況です．．．
大まかでも構いませんので， viewsとajaxのやり取りの仕組みを大まかにご教授いただけないでしょうか．．．？
私も2,3週間前に挑戦しただけなのですが、
大前提としてDjangoの処理として、templateでのDjango構文はレスポンスされた後の表現はできませんよね
（レスポンス後にif文やfor文は使えないよねって話）
なので色々調べた事もあり、ここでのajax_color_change関数の返り値はHttpレスポンスになります
そのレスポンスをhtmlのdoneで受け取ってjsで描画するというような動きしか理解はしていないのですが...
まぁ書くとなると、
ajax_color_changeの返り値をreturn HttpResponse(color)
.done(function(data){document.body.append(color})
というような感じでしょうか
多分 return colorとかでも動くハズです(試してはない)
jsで書く事でリロードする必要はなくなりますが、
ゲーム内にjsでアクセスできるかが鍵になるかとは思います
ご対応いただきありがとうございます。
ajax→views→ajaxという流れで処理されているという形の理解でよろしいでしょうか…
レスポンスの処理のことなどを調べたり、書いていただいたコードを参考にしたりしながら再度挑戦してみたいと思います！
あなたの回答
tips
プレビュー
