Jquery XHR 导致 dom 更改通过刷新等持续存在

Question

这更像是一个设计问题而不是技术问题，但我完全被难住了。

所以，我有一个网页（通过谷歌应用引擎托管），其中列出了许多单独的表格（每个表格都是一个问题/谜题）。一个拼图有许多要填写的文本框，以及一个提交按钮。点击提交后，将向服务器（运行 python）发出 ajax 请求，该请求检查给出的答案是否正确。作为响应，页面会通过在相关文本框中添加适当的勾号和叉号来更新，以及覆盖整个问题的中等不透明度叠加层（为整个问题提供“灰色”效果）。

当页面刷新时，这些修改明显消失了。但是，ajax 请求会将答案信息保存到数据库中。问题本身是通过使用 Jinja2 呈现页面来创建的。

因此，所有相关数据都已保存，以便用户下次返回该页面时，他过去回答的问题仍然是灰色的，他的答案和勾号/叉号仍然存在。但是，我无法弄清楚最好的方法是什么。我是否使用 jinja2 循环中的 if 语句对已完成问题的 dom 修改进行硬编码（例如：对于正在创建的每个问题，如果它已经被回答，则以不同的方式呈现它）。或者，让页面正常加载，然后为页面上的每个问题/表单执行加载 XHR 会更好吗？

我真正想做的是，当每个表单都在 Jinja2 中呈现时，执行 xhr 以查看它是否在 db 中有答案，如果有，则采取相应的行动。但是将 jinja2 与 ajax 混合起来似乎很混乱，肯定有更好的方法来解决这个问题吗？

抱歉，这个问题冗长而令人费解，希望它至少可以理解。

Answer 1

我会选择选项 #1 的变体（使用 Jinja2 呈现正确的标记） - 除非您要呈现 非常 大量的表单，否则页面应该以非常短的顺序返回（如果您确实拥有大量表单，则发出大量 XHR 请求不会更快）。此外，通过让 Jinja 呈现您的 HTML，您可以确保没有 JavaScript 的用户至少可以看到他们之前的答案（而不是强迫每个点击您的应用的人都启用 JavaScript。）

你需要两件东西（如果你还没有的话）：

1. 一种表示表单/问题的方式 - 您可能会发现一个类最适合您需要的封装类型。

2. 将此类的实例呈现为 HTML 的一种方式。这正是macros 的设计目的。或者，你可以给你的类一个 __html__ 方法，（记得返回一个 Markup 的实例）。