提交 wft flask 表单并停留在同一页面

Question

我有一个简单的 Flask 应用程序，有多种形式。将显示第一个表格，当用户回答问题并单击 'Next' 按钮时，将显示下一个表格...直到最后一个表格。

我想按时间显示一个表格，但我想保持在同一页面上。现在，点击按钮 'Next' 后，页面重新加载。

项目：https://github.com/kallylopes/Oneblood

Answer 1

Note: I am not trying to answer your question directly.

Flask 是一个后端 serverlet

这是 flask 中与此问题相关的唯一内容。

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

# process request.
query_string = request.xxx

but I want stay on the same page. By now, after click at the button 'Next', the page is reload

您的目的可以通过纯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处理（应该shows/hides）

如果要存储单页，可以使用哈希标签。这是另一个例子：How do I link to part of a page? (hash?).

另一个正在使用 Ajax, storing questions by js, but processing them by flask(like 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

哪个更好？

视情况而定。 flask 处理将消耗 server 资源。 javascript 处理将消耗 client 资源。

提交 wft flask 表单并停留在同一页面

Submit wft flask form and stay on same page

python

flask

wtforms