提交wft燒瓶形式並保持在同一頁面

Question

我有一個簡單的多種形式的燒瓶應用程序。第一種形式將顯示，當用戶回答問題並單擊「下一步」按鈕時，下一個表格將顯示...直到最後一個表格。

我想按時間顯示一個表格，但我想留在同一頁面上。現在，點擊按鈕'Next'後，頁面將被重新加載。

項目：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 

---

，但我想留在同一頁上。現在，點擊按鈕'Next'後，頁面重新加載

您的目的可以通過pure-javascript（通過一個請求完成）或Ajax（部分重新加載）完成。

電流流

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

流量預計（在發送一個請求所有數據）

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. 

如何隱藏或顯示的問題？

有很多方法可以做到這一點，jQuery是一個常見的解決方案。或者你可以嘗試任何其他的前端框架，angularJS/reactJS/vueJS/etc。當然，純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?)。

另一個正在使用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資源。