提交 wft flask 表格并留在同一页面上

Question

我有一个包含多种表单的简单烧瓶应用程序。将显示第一个表单，当用户回答问题并单击“下一步”按钮时，将显示下一个表单...直到最后一个表单。

我想按时间显示一个表格，但我想留在同一页面上。至此，点击“下一步”按钮后，页面已重新加载。

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

Answer 1

注意：我不想直接回答你的问题。

Flask 是一个后端 serverlet

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

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

# process request.
query_string = request.xxx

---

但我想留在同一页面上。至此，点击“下一步”按钮后，页面重新加载

您的目的可以通过纯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存储问题，flask处理（如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资源。