teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

リロード

2020/07/07 11:23

投稿

YufanLou
YufanLou

スコア466

answer CHANGED
@@ -6,4 +6,49 @@
6
6
  }
7
7
  ```
8
8
 
9
- 追記:問題文のコードは`check.html`で`index.html`を書き換えたので、上記のJavaScriptを`check.html`に入れてください。
9
+ 追記:問題文のコードは`check.html`で`index.html`を書き換えたので、上記のJavaScriptを`check.html`に入れてください。
10
+
11
+ リロードについて追記:
12
+
13
+ /poll/check でリロードで form データ再送するのを実装します。
14
+ まず、どこかで form データを保存しなければならない。History API で歴史 state に form データを保存できます。
15
+
16
+ ```javascript
17
+ // app.js
18
+ // ...
19
+ async function sendDataOnLoad() {
20
+ //歴史state存在しなかったら中止
21
+ if (!history.state) return;
22
+ //歴史stateからformデータを取得
23
+ let formData = history.state.formData;
24
+ let response = await fetch(formUrl, {
25
+ method: 'POST',
26
+ body: formData
27
+ });
28
+ if(response.ok){
29
+ //成功の場合の処理
30
+ console.log(response)
31
+ document.open();
32
+ document.write(await response.text());
33
+ document.close();
34
+ }else{
35
+ //失敗の場合の処理
36
+ }
37
+ }
38
+ window.onload = sendDataOnLoad;
39
+ ```
40
+
41
+ サーバーサイドでリダイレクトしたらこのコードを動作しなくなるかもしれないので、Pythonをこう変わります:
42
+
43
+ ```python
44
+ // views.py
45
+ def check(request):
46
+
47
+ if request.method == "GET":
48
+ return render(request, 'polls/index.html')
49
+ # ...
50
+ ```
51
+
52
+ けど、直接にこう実装したら、formデータを送信して、/polls/checkをロードして、formデータを送信して、/polls/checkをロードして…という無限ループになりそうです。
53
+
54
+ 未完成ですが、参考になれたら幸いです。

1

コメントからどのページに入れるかを追記

2020/07/07 11:23

投稿

YufanLou
YufanLou

スコア466

answer CHANGED
@@ -4,4 +4,6 @@
4
4
  window.onpopstate = function(event) {
5
5
  window.location.assign(document.location);
6
6
  }
7
- ```
7
+ ```
8
+
9
+ 追記:問題文のコードは`check.html`で`index.html`を書き換えたので、上記のJavaScriptを`check.html`に入れてください。