質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

492閲覧

クラスベースビューの特定のメソッドのみを非同期通信で実行したい

tomi2904

総合スコア22

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2022/08/07 09:16

ボタンを押したらGamingViewのpostメソッドのみが実行されてほしいのですが、__init__メソッドから行われてしまいます。どのようにすればよいでしょうか?

以下詳細です

  • answer_formに文字列を入力してボタンを押すとPOSTが実行され、GamingViewのself.params[answers]にappendしたい
  • 画面をリロードしたくないのでfetchによる非同期通信を行なっている

質問用に抜粋・簡略化しています。よろしくお願いします。

python

1# views.py 2class GamingView(generic.TemplateView): 3 4 template_name = 'gaming.html' 5 6 def __init__(self): 7 # viewとhtml間で受け渡しされる変数. 何度も使い回すのでインスタンス変数として宣言 8 self.params = { 9 'answers': [], 10 } 11 12 def get(self, request, *args, **kwargs): 13 return render(request, self.template_name, self.params) 14 15 # ボタンを押したらこのメソッドだけが行われてほしい 16 def post(self, request, *args, **kwargs): 17 answer = request.POST.get('answer') # 入力された解答 18 self.params['answers'].append(answer) 19 return JsonResponse(self.params)

python

1# urls.py 2from django.urls import path 3from .import views 4app_name = 'game' 5 6urlpatterns = [ 7 path('', views.TitleView.as_view(), name='title'), # タイトル画面 8 path('gaming/', views.GamingView.as_view(), name='gaming'), # ゲーム中の画面 9]

html

1<!-- gaming.html --> 2<body> 3 <div class="home-content wrapper"> 4 <form id="answer_form" name="answer_form"> 5 {% csrf_token %} 6 <input id="answer" type="text" name="answer", value=""> 7 <button id="submit-button" class="button-game" type="submit">解答</button> 8 </form> 9 <h3 class="question" id="hoge_output" >出力先</h3> 10 </div> 11 12 <script > 13 const answer_form = document.getElementById('answer_form') 14 answer_form.addEventListener('submit', (e) => { 15 e.preventDefault() 16 const url = '{% url "gaming" %}' 17 const answer = document.getElementById('answer') 18 const body = new URLSearchParams() 19 body.append('answer', answer.value) 20 21 fetch('', { 22 method: 'POST', 23 body: body, 24 headers: { 25 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8', 26 'X-CSRFToken': csrftoken, 27 }, 28 }) 29 .then((response) => { 30 return response.json() 31 }) 32 .then((response) => { 33 answer.value = '' 34 // gamingviewのself.paramsのanswersの長さを出力する 35 document.getElementById('hoge_output').innerHTML = response.answers.length 36 }) 37 .catch((error) => { 38 console.log(error) 39 }) 40}) 41 </script> 42</body>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2022/08/07 21:36

セッション変数とかを使う必要があるのでは…。
tomi2904

2022/08/07 22:05

回答ありがとうございます。セッション変数について調べてみようと思います。
guest

回答1

0

自己解決

python

1# views.py 2class GamingView(generic.TemplateView): 3 4 template_name = 'gaming.html' 5 6 def get(self, request, *args, **kwargs): 7 params = {} # この辞書にHTML側に渡したいものを詰め込む 8 request.session['hoge'] = ['つ', 'か', 'い', 'ま', 'わ', 'す'] # gaming.html内で何度も使い回したい変数(セッション変数) 9 request.session['fuga'] = 123456789 10 params['hogehoge'] = request.session['hoge'] 11 return render(request, self.template_name, params) 12 13 # ボタンを押したらこのメソッドだけが行われる 14 def post(self, request, *args, **kwargs): 15 params = {} 16 answer = request.POST.get('answer') # 入力された解答 17 request.session['hoge'].append(answer) # セッション変数の方にappend 18 params['hogehoge'] = request.session['hoge'] 19 return JsonResponse(params)

結論

使い回したい変数はセッション変数に格納し、それを適当な辞書に入れてreturnすれば良い。

appendとかの挙動は確かめていませんが、今回知りたかったクラスベースビューの特定のメソッド(今回はPOST)のみを非同期通信で実行したいということはこれでできることがわかりました。
解答してくださった方助かりました。ありがとうございました。

余談

return render(request, self.template_name, params)という書き方は正しいんですかね

投稿2022/08/14 12:38

tomi2904

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問