基于 AJAX 输入构建 HTML 的正确方法答案

【问题标题】：proper way to construct HTML based on AJAX input基于 AJAX 输入构建 HTML 的正确方法
【发布时间】：2011-12-25 20:48:39
【问题描述】：

所以我正在用 Django 开发这个 Web 应用程序。确切的 Web 框架并不重要，但重点是：我们在代码、数据和实际 HTML 之间有一个很好的分离。然而，我们走得越远，我们就越想保留在一个网页上，并使界面通过 AJAX 请求响应用户操作。现在我发现自己正在编写所有这些处理函数，它们期望来自 AJAX 请求的特定输入，并通过基本上连接字符串和数据来构造页面的大部分。突然又是 1999 年，我正在手动创建 HTML 字符串。这不可能吧？

所以我的问题是，什么是体面的模式/框架/...以系统的方式在浏览器端创建 HTML？我知道有一些用于 jQuery 的模板插件，在我提交其中一个之前，我想知道是否没有更基本的方法来解决这个问题，这种方法不会那么罕见？

【问题讨论】：

我强烈建议探索某种类型的客户端模板。（例如，Handlebars）
一般来说，让你的应用程序完全依赖于 JavaScript 是一个糟糕的设计。你应该让你的页面在禁用 JavaScript 的情况下工作，即使只有 2-3% 的用户会禁用它。这将允许您的页面在更多平台上运行，并使其在他们的机器上运行得更快。检测、报告和重现客户端代码中发生的错误也要困难得多。您仍然可以在这样的场景中使用 AJAX 来增强页面、添加精美的效果、摆脱使客户端体验笨拙的页面加载等内容。

标签： javascript jquery ajax coding-style

【解决方案1】：

我之前所做的是让我的服务器进行处理和代码生成。减轻客户端的负担。

您可以加载部分（视图）并以 json 编码或其他方式返回它们。如果您使用 json，请将 HTML 设置为响应对象中的“内容”或类似内容。

这样，由于您可以使用相同的视图，因此没有代码重复。诀窍在于如何将它们分开。

【讨论】：

谢谢，这是个好主意。出于某种原因，我以前从未想过这一点。优点是我们可以在服务器端保留逻辑和模板。当然，代价是增大要传输的 ajax 数据的大小。想知道应用压缩是否有意义，或者是否已经在更深层次上进行了处理..现在暂时没有答案，只是为了让想法不断涌现......
说真的，视图有多大？几kb？我不会担心它=）
呵呵，这就是我通常的想法，但你让我陷入了“基本问题解决模式”;)
我从来没有想过让客户端的负载成为一个问题（除非你正在构建一些非常复杂的 HTML）

【解决方案2】：

您是否考虑过在 javascript 类中保存一组 javascript dom 对象，而不是构造 html 字符串，这些对象在其中保存您的关系数据库数据，然后根据用户交互使用 AJAX 循环/构建它们？这就是我如何在一个页面上通过动态预加载（允许用户在选择它时立即获得完整尺寸的图像）在一个页面上维护一个包含近 500 张照片（分成几组）的照片库。

【讨论】：

【解决方案3】：

也遇到了这种 1999 年的感觉，就选择了jQuery tmpl。它将允许您将模型和视图分开，并有更多时间专注于业务逻辑。您可以在文档正文中的任何位置使用 text/x-jquery-tmpl 类型的 script-tag 来定义模板，并通过其 id 对其进行寻址来使用它。

【讨论】：