最初渲染页面并使用相同的模板HTML通过AJAX更新

Question

假设您有一个名为"View Story"的视图,它只是通过Python/Django在后端呈现的网页.在该页面上,使用Django的模板系统(在循环中)作为"View Story"模板的一部分呈现在底部的注释列表.此页面还允许您向列表添加注释.这是通过AJAX完成的,页面使用新评论进行更新(不发送新的整页请求).

现在,当将新注释添加到列表末尾时,我希望为此新注释(内部的某些内容<li>)生成的HTML 使用完全相同的代码,该代码用于生成通过原始请求发送给客户端的原始注释.

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

1. 让初始渲染将注释数据抛出到javascript变量中,一旦页面呈现,就通过javascript添加内容.然后,当添加新注释时,可以使用相同的javascript来呈现新的注释.问题:从搜索引擎的角度来看,我不确定google是否能够在页面呈现之后生成它们的索引 - 我猜不是

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

3. 与#2类似,不同之处在于单独请求检索新注释的HTML或者可能是所有注释,并且只是擦除并重新呈现列表.不喜欢它,因为它效率极低且不必要地耗费时间.

因此,总而言之,我想要一种方法来避免为单个视图复制模板/ HTML代码.我想对其他人有用的建议,因为我很确定这是一个常见的情况,无论后端的技术如何.

谢谢!

Answer 1

这是你应该做的:

view_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):

def add_comment(request):
    comment = Comment(...)
    return render_to_response('comment_item.html', {'comment': comment})

因此,在您向ad_comment视图提交ajax查询后,您将获得评论的内容(一条评论)..之后只需将其推送到列表.. fe使用jQuery,如下所示:

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

Answer 2

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

选项 1 很浪费：服务器应该按照页面首次出现时的方式呈现页面。

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