Jquery XHR 导致 dom 更改通过刷新等持续存在
这更多的是一个设计问题而不是技术问题，但它让我完全难住了。
所以，我有一个网页（通过谷歌应用程序引擎托管），其中列出了许多单独的表单（每个表单都是一个问题/谜题）。一个谜题有多个需要填写的文本框以及一个提交按钮。点击提交后，会向服务器（运行 python）发出 ajax 请求，该服务器检查给出的答案是否正确。作为响应，页面会通过在相关文本框上添加适当的勾号和叉号以及覆盖整个问题的中等不透明度覆盖层（使整个问题呈现“灰色”效果）来进行更新。
当页面刷新时，这些修改明显消失。然而，ajax请求将答案信息保存到数据库中。问题本身是通过使用 Jinja2 渲染页面来创建的。
因此，所有相关数据都会被保存，以便用户下次返回页面时，他过去回答过的问题仍然呈灰色，他的答案和勾号/叉号仍然存在。但是，我不知道最好的方法是什么。我是否使用 jinja2 循环中的 if 语句对已完成问题的 dom 修改进行硬编码（例如：对于正在创建的每个问题，如果已经得到回答，则以不同的方式呈现它）。或者，让页面正常加载，然后为页面上的每个问题/表单执行加载 XHR 会更好吗？
我真正想做的是，当每个表单在 Jinja2 中呈现时，执行 xhr 以查看它在数据库中是否有答案，如果有，则采取相应的行动。但是将 jinja2 与 ajax 混合起来似乎很混乱，肯定有更好的方法来解决这个问题吗？
抱歉这个问题很长，很复杂，希望它至少是可以理解的。
This is more of a design question than technical, but it has me completely stumped.
So, I have a webpage (hosted via google app engine) that lists a number of seperate forms (each is a question/puzzle). A single puzzle has a number of text boxes to fill out, as well as a submit button. Upon hitting submit, an ajax request is made to the server (running python) which checks if the answers given were correct. In response, the page updates by adding appropriate ticks and crosses by the relevant text boxes, as well as a medium-opacity overlay that covers the entire question (to give the whole thing a "greyed out" effect).
When the page is refreshed, these modifications obviously disappear. However, the ajax request saves the answer info to the database. The questions themselves are created by rendering the page using Jinja2.
So, all the relevant data is saved so that the next time the user returns to the page, questions he has answered in the past are still greyed out, his answers and tick/crosses still there. However, I can't figure out what the best way to do this would be. Do I hard-code the dom modifications for finished questions using if statements in the jinja2 loop (eg:for each question being created, if it's already been answered then render it differently). Or, would it be better to let the page load normally, and then perform an on-load XHR for each question/form on the page?
Really what I want to do is, as each form is rendered in Jinja2, perform an xhr to see if it has an answer in the db, and if so act accordingly. But mixing jinja2 with ajax seems quite messy, surely there is a better way to go about this?
Sorry for the long convoluted question, hopefully it's at least comprehensible.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我会选择选项 #1 的变体（使用 Jinja2 呈现正确的标记） - 除非您呈现非常大量表单，否则页面应该以非常短的顺序返回（并且如果您确实拥有大量表单，发出大量 XHR 请求不会更快）。另外，通过让 Jinja 渲染您的 HTML，您可以确保没有 JavaScript 的用户至少可以看到他们以前的答案（而不是强迫每个访问您应用程序的人都启用 JavaScript）。
您需要两件事（如果您还没有 ）他们）：
一种表示表单/问题的方式 - 您可能会发现一个类最适合您需要的封装类型。 一种表示表单/问题
将此类实例呈现为 HTML 的一种方法。这正是宏的设计目的为了。或者，您可以为您的类提供一个
__html__方法（请记住返回Markup的实例）。I'd opt for a variant of option #1 (use Jinja2 to render the proper markup) - unless you are rendering a very large number of forms, the page should return in very short order (and if you do have a very large number of forms, making a great number of XHR requests is not going to be faster). Also, by letting Jinja render your HTML you ensure that users without JavaScript can at least see their previous answers (rather than forcing everyone who hits your app to have JavaScript enabled.)
You'll want two things (if you don't already have them):
A way of representing your forms / questions - you'll probably find a class works best for the kind of encapsulation you need.
A way of rendering instances of this class to HTML. This is exactly the sort of thing that macros were designed for. Alternately, you could give your class an
__html__method, (remember to return an instance ofMarkup).