Jquery 很好的页面渲染和AJAX更新方法

想象一下，在一个评论网站上，用户可以输入评分和可选的简短评论

在每一个评论页面上，你都会看到很多评论——它们显示在页面末尾的一个表格中（顺便说一句——不寻找datagrid类型的控件，太简单了）

我想让用户在不刷新页面的情况下输入新评论并更新页面

为页面生成内容的好方法是什么。一些想法：-

生成评论HTML服务器端，使用javascript客户端附加新评论。缺点是在两个地方有表HTML生成代码。 好处-就搜索引擎而言，页面上有更多内容

服务器端仅将评论输出为json/xml/whatever，并使用javasript在页面加载时动态呈现HTML

缺点-javascript中的“模板”，设计师很难自定义+页面上缺少“内容”

是否有一种方法将这两种方法结合在一起？即，模板框架将呈现现有的数据服务器端，但也会发送模板片段客户端，以便在添加/编辑时重用模板片段

使用（2）获取初始页面加载时的数据，您会这样做吗

• a） 在初始页面中包含json/xml，并在页面加载时运行客户端呈现

• b） 在页面加载时通过单独的AJAX调用获得它（+更简单，-额外请求和延迟）

我主要关注jQuery/Django，但这个问题也适用于其他框架和AJAX库

---

这是一个有点主观的问题，希望不要越界！想法？

当我试图建立一个在线可编辑数据库来保存需要筹资团队联系的公司的状态时，我遇到了类似的问题

最终，为了减少数据传输，我选择了2-json和4-b，但由于缺少时间，没有javascript也不会让它工作。SE没有索引内容，但不关心，因为它是私有的

但是，如果每次更新都传输整个表一次不成问题，我会选择1。顺便说一句，我不明白你为什么说HTML生成代码会出现在两个地方

假设您有一个只生成表的

page\u content

视图，那么在呈现初始页面（所有服务器端）视图时，您可以1）将其作为一个“组件”包含（因为它类似于组件思想，其中页面是一个嵌套组件树）然后2）使用ajax请求并替换旧表父表的innerHTML，这意味着HTML表生成代码只能在

page\u content

中找到，搜索引擎很满意

另外，对1的一个很好的优化是不时轮询服务器以获取更新，但提供上次更新的时间戳，以便服务器可以在您已经拥有最新内容的情况下发送空响应。（好吧，如果您在HTML5中不使用WebSocket，这就不需要使用推送通知进行轮询）

2本身对于一般用途来说是丑陋的，有三个听起来非常好，但我不知道有哪种模板框架可以在服务器端和客户端自动处理这些数据

---

对于编辑，尤其是添加，你是对的，如果你真的想发送尽可能少的数据，你必须在客户端制作模板（这就是我在我的页面上所做的编辑），但是您可以更容易地坚持使用1，方法是将编辑/新建项发送到服务器，然后使用ajax请求更新的页面。

您不必提前知道模板，只需在代码中设置钩子，以便在呈现模板时使用JSON填充哪些数据

该场景的工作原理如下：

服务器端在初始加载时生成页面

AJAX调用发现新的页面数据并希望呈现它

jQuery从页面克隆注释项，并用JSON重新填充数据

我个人喜欢将初始页面加载保持在服务器端，以便更容易缓存页面，然后仅在需要更新页面或切换到相关页面时使用AJAX，而不必重新加载网站

给你举个例子：

<ul class="commentsArea">
    <li class="comment" data-commenter-id="user1234">
        <a href="#" class="userName">Rob</a>
        <p class="userCommentContent">Some comment content would go here.</p>
    </li>
</ul>

最后，您必须克隆注释以添加新注释：

var newComment = $('li.comment:first').clone();
// fill in your AJAX data here
var newCommentMetaData = {
    userid: 'user2345',
    name: 'Pete',
    content: 'The new comment content goes here'
};
/* you would have to put an each() function here to iterate through all new comments
   and template them up, but hopefully you get the idea */

template(newComment, newCommentMetaData).appendTo('.commentsArea').fadeIn();

---

对于框架，场景（3）的一种方法（结合两种方法）是使用“部分”视图。局部视图是视图的一个片段，可以单独渲染；一个视图可以由几个部分组成

---

在您的情况下，您需要定义一个分部来呈现审阅。当从头开始显示页面时，服务器端代码循环浏览现有的评论，并调用partial来逐个呈现它们。将新评论添加到现有页面时，javascript会要求服务器仅呈现该新评论的部分内容，并将其作为Ajax响应返回，然后将其附加到页面上的现有评论中。

对于框架，（3）的一种方法是使用视图“部分”呈现评论。服务器端代码循环浏览现有的评论，并调用partial来逐个呈现它们，作为呈现父页面的一部分；添加新评论后，javascript会要求服务器为该新评论呈现部分内容，并将其返回给客户端，并将其附加到页面上现有的评论中。Matt-我喜欢这个想法，并将进一步调查-如果愿意，将其作为答案输入，确保获得分数和奖品；）re“我不明白你为什么这么说”——我的意思是，如果你为现有的记录服务器端生成html，但是新建/编辑客户端，那么服务器端python/php/whatever和客户端javascript都必须“知道”如何生成html。想要改变，你必须在两个地方做。喜欢它-如果html元素的类名是s

var newComment = $('li.comment:first').clone();
// fill in your AJAX data here
var newCommentMetaData = {
    userid: 'user2345',
    name: 'Pete',
    content: 'The new comment content goes here'
};
/* you would have to put an each() function here to iterate through all new comments
   and template them up, but hopefully you get the idea */

template(newComment, newCommentMetaData).appendTo('.commentsArea').fadeIn();