Q&A前提・実現したいこと
ajaxにて，form内のボタンのvalueを送信しようとしています．
発生している問題・エラーメッセージ
ボタンをクリックしても，そのボタンのvalueが取得できておらず，受け取り先ではnoneとなってしまいます．
# postメソッドからcolorという名前のデータを受け取る． color = request.POST.get('color') # 受け取ったデータを出力する print(color) →none
試したこと
form内のbtnクラスがクリックされた時に，そのvalueを取得するような動きを目指してコーディングしましたが，うまく動作させることができませんでした．
該当のソースコード
base.html
{% load static %} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js" ></script> <link rel="icon" href="{% static 'img/favicon.ico' %}" /> <title>{% block title %} {% endblock title %}</title> </head> <body> {% block contents %} {% endblock contents%} </body> </html>
game.html
html
1{% extends 'coloring/base.html' %} {% block title %} game {% endblock title %} 2{% block contents %} 3 4 <div id="game"> 5 <form name="color-form" action="{% url 'coloring:ajax_change_color' node_num %}" method="POST" > 6 {% csrf_token %} 7 <input type="submit" id="color" class="btn" value="red" > 8 <input type="submit" id="color" class="btn" value="blue" > 9 <input type="submit" id="color" class="btn" value="green" > 10 </form> 11 </div> 12 13 <script> 14 $("#color-form").submit( function(event) { 15 event.preventDefault(); 16 var form = $(this); 17 $(".btn").click( function(event) { 18 event.preventDefault(); 19 var btn = $(this); 20 $.ajax({ 21 url: form.prop("action"), 22 method: form.prop("method"), 23 data: { 24 'color': btn.val(), 25 }, 26 timeout: 5000 27 }) 28 .done( function(data) { 29 alert(data); 30 console.log(data); 31 }) 32 .fail( function(xhr, err) { 33 alert(err); 34 console.log(err); 35 }) 36 }); 37 }); 38 </script> 39 40{% endblock contents %} 41
views.py
python
1def ajax_change_color(request, node_num): 2 color = request.POST.get('color') 3 print(color) 4 5---省略---
補足情報（FW/ツールのバージョンなど）
macOS 10.15.7
python 3.8.2
django 3.1.2
回答2件
0
受け取っているように見えます。
}).done( function(data) { console.log(data); });
で戻り値をみてみてください
投稿2020/11/02 05:27
総合スコア116724
0
自己解決
alertを様々な位置に配置してデバッグをしてみたところ，
$("#color-form").submit( function(event)以下の部分が動作していないとわかりました．
そのため，game.htmlのスクリプトを
<script> $(".btn").click( function(event) { (省略) } </script>
としたところ，無事に動作し，データの取得ができました．
formのsubmitをスクリプトのトリガーにしたことが原因なのは分かったのですが，
どのように記述すれば元々の記述でも動作させられたのかが分かっていないので，
ご存知の方がいらっしゃればご教授いただけますと幸いです．
投稿2020/11/05 05:47
総合スコア3
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/02 22:52
2020/11/04 02:47
2020/11/04 06:00