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

Question

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

我希望按时间显示一个表单，但我想留在同一页面上。到目前为止，点击按钮＆＃39;下一步＆＃39;后，页面将重新加载。

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

  

但我想留在同一页面上。到目前为止，点击按钮＆＃39;下一步＆＃39;后，页面将重新加载

您的目的可以通过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 /等。当然，纯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资源。