Javascript 最初呈现页面，并使用相同的HTML模板通过AJAX进行更新

假设您有一个名为“视图故事”的视图，它只是一个通过Python/Django在后端呈现的网页。在该页面的底部有一个注释列表，使用Django的模板系统（在循环中）作为“查看故事”模板的一部分呈现。此页面还允许您向列表中添加注释。这是通过AJAX完成的，页面会用新的注释更新（不发送新的完整页面请求）

现在，在将新注释添加到列表末尾时，我希望为该新注释生成的HTML（在

中的某个内容）使用与生成通过原始请求发送到客户端的原始注释所使用的代码完全相同的代码

有多种方法可以做到这一点：

让初始呈现将注释数据抛出到javascript变量中，并在呈现页面后通过javascript添加内容。然后，当添加新注释时，可以使用相同的javascript呈现新注释。问题是：从搜索引擎的角度来看，如果评论是在页面呈现后生成的，我不确定谷歌是否能够为其编制索引——我猜不会

每次通过AJAX添加新注释时，让AJAX请求返回要放在页面上的实际HTML，而不仅仅是新注释的JSON数据。HTML可以使用用于呈现原始页面的相同模板片段生成。问题是它将AJAX请求与我不喜欢的特定视图或呈现方式联系起来

与#2类似，不同的是会发出一个单独的请求来检索新注释的HTML，或者可能是所有注释和列表都会被删除并重新呈现。我不喜欢这样，因为这样做效率很低，而且不必要地耗费时间

总之，我想要一种避免在单个视图中重复模板/HTML代码的方法。我想听听对其他人有用的建议，因为我很确定这是一种常见的情况，与后端的技术无关

---

谢谢

我认为选择2是最好的。它是增量的（添加注释时只渲染一条注释），并重新使用渲染。如果您不喜欢只从Ajax请求返回HTML，那么将响应设置为JSON结构，其中只包含HTML作为一个组件。然后，您还可以携带状态（或任何内容），而无需额外请求即可获取HTML

选项1是浪费：服务器应该按照页面第一次出现的样子呈现页面

---

选项3也很浪费：为什么要提出两个请求来添加一条评论？

以下是您应该做的：

查看_story.html：

bla bla bla

Comments:
<ul id="comments">
{% for comment in comments %}
   <li>{% include "comment_item.html" %}</li>
{% endfor %}
</ul>
<from>Ajax form here</form>

因此，在提交ajax查询以添加注释视图后，您将获得注释的内容（一条注释）。。然后把它推到列表上。。f、 e.像这样使用jQuery：

$('ul#comments').append('<li>'+comment_content+'</li>')

$（'ul#comments'）。追加（'
'+comment_content+'
'））

还有选项4：

复制列表中的现有元素并更改其值。这当然不如模板灵活。您可以复制隐藏元素来处理列表为空的情况

您也可以尝试选项2b：

像选项2一样在服务器上生成HTML，但不要直接访问数据库，而是将JSON（或可以轻松转换为JSON的对象）传递给生成例程。这涉及到更多的工作，但意味着您在编写自己的网站的同时，也在有效地编写API

选项1是任何非web应用程序都会使用的。尽管搜索引擎处理AJAX的能力正在提高，但仍然强烈建议以HTML格式返回所有内容。我认为Javascript在所有现代浏览器中都足够快，除了巨大的页面之外，除了SEO问题，1是相当合理的

---

还有一个选项5——在服务器上使用Javascript生成页面，并在客户端上使用相同的代码。这可能是最复杂的方法，除非你有充分的理由，否则我不会推荐它。

是的，我同意。为了完整起见，我只是想讨论一下可能性。所以选择2。这似乎是共识（如果3是共识）。谢谢我也是这样做的。看起来是最干的。但这不是干的！您正在重复您的“模板”代码，这在本例中非常简单。在这之后，我打赌有一天你会说“我刚刚更新了我的视图，涉及到view_story.html……哦，等等！”@Mauricio，这是一个非常干燥的注释comment_item.html，它包含在列表注释模板和ajax响应中，并且从未重复过

$('ul#comments').append('<li>'+comment_content+'</li>')