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

Question

这更像是一个设计问题,而不是技术问题,但它让我完全难过.

所以,我有一个网页(通过谷歌应用程序引擎托管)列出了一些单独的表格(每个都是一个问题/谜题).单个拼图有许多文本框可供填写,还有一个提交按钮.点击提交后,向服务器(运行python)发出ajax请求,检查给出的答案是否正确.作为回应,页面通过相关文本框添加适当的刻度和十字来更新,以及覆盖整个问题的中等不透明覆盖(以使整个事物具有"灰色"效果).

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

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

真的我想要做的是,因为每个表单都在Jinja2中呈现,执行xhr以查看它是否在数据库中有答案,如果有,则相应地采取行动.但将jinja2与ajax混合似乎相当混乱,肯定有更好的方法可以解决这个问题吗？

很抱歉这个冗长的问题,希望它至少是可以理解的.

Answer 1

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

您需要两件事（如果您还没有）：

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

2. 将此类实例呈现为 HTML 的一种方法。这正是宏的设计目的。或者，您可以为您的类提供一个__html__方法（请记住返回 的实例Markup）。