wftフラスコフォームを送信して同じページに留まる

Question

私は多くのフォームを備えた単純なフラスコアプリを持っています。最初のフォームが表示され、ユーザーが質問に答えて「次へ」ボタンをクリックすると、最後のフォームまで次のフォームが表示されます。

時間ごとに1つのフォームを表示したいが、私は同じページにとどまりたい。今度は、「次へ」ボタンをクリックすると、ページがリロードされます。

プロジェクト：https://github.com/kallylopes/Oneblood

Answer 1

注：私は直接あなたの質問にお答えしようとしていないのです。

フラスコはここ

バックエンドserverletですが、この質問に関連したフラスコ内で唯一のものです。

# Render a new template OR Redirect an url 
return render_template(...) 
return redirect(url_for(...)) 

# process request. 
query_string = request.xxx 

---

が、私は同じページに滞在したいと思います。今では、ボタン「次へ」のクリック後、ページが

あなたの目的は、（1つのリクエストによって行われる）純粋なJavaScriptやAjaxの（部分的な再読み込み）することによって行うことができリロードです。流れ（1つのリクエスト内のすべてのデータを送信する）の質問を非表示または表示する方法

1. Fill questions & Click next 
2. Hide current questions & Show next questions 
3. Loop 1~2 until finish all question 
4. Click finish then send request to flask 
5. Serverlet process data 

# the key point is 2, I will describe below. 

期待

電流の流れ

1. Fill questions & Click next 
2. Send request to flask 
3. Serverlet process data and Reload/Redirect next page 
4. Loop 1~3 

？

これを行う方法はたくさんありますが、jqueryは一般的な解決策です。あるいは、他のフロントエンドフレームワーク、angularJS/reactJS/vueJS /などを試すこともできます。もちろん、純粋なjavascriptでもこれを行うことができます。

いくつかの例：新しい質問をロードする方法How To Show And Hide Input Fields Based On Radio Button Selection

？

ロード開始時にすべての質問、JSによってそれらを格納し、JSによってそれらを処理する。あなたは、単一のページを保存したい場合は（番組/非表示すべきである）

が、あなたはハッシュタグを使用することができます。別の例があります：How do I link to part of a page? (hash?)

もう1つはAjaxを使用し、jsで質問を保存しますが、フラスコで処理します（paginationなど）。

http://someurl/question/1 // <--flask return page1 questions for ajax get 
# after click next 
http://someurl/question/2 // <--flask return page2 questions for ajax get 

どちらが優れていますか？

によって異なります。フラスコで処理すると、資源はserverになります。 JavaScriptによる処理は、clientのリソースを消費します。