如何在jquery的页面中插入大量html？

我正在使用PHP和jQuery的评论脚本。如何在jquery的页面中插入大量html？

我的jquery发布数据到我的php后端脚本，成功后我需要它插入后端脚本发回的结果。

现在我有一切工作，除了添加注释到页面的部分我卡住了。我可以使用这样的东西;

$('#comments').prepend(data.comment);

上面的代码将添加文本/注释部分进入格的意见，但我需要做更多的则只需添加文字，我需要它来添加其他div的，注释文本，用户的照片，日期以及您在下面的照片中看到的所有其他内容。

我没有问题获取所有这些数据，但我应该如何将其全部添加到页面？

类似于下面的东西，但有更多的代码？

$('div#loader').append('<span class="success">Thanks for your comment!</span>');

这是与现有的评论页面，在添加AJAX职位是，我需要插入到列表中的新评论，并让它看起来像其他人

alt text http://img2.pict.com/21/4e/f0/1505261/0/800/screenshot2b20.png

来源

2009-08-22 JasonDavis

我会绝对不建议您在您的请求中发送HTML标记。例如，如果您使用JSON，您将节省带宽，并且您的用户将更快乐地加载一个网站。

这是更好，如果你使用jQuery和JavaScript从您的网页复制的模板（例如可以是一个隐藏的div）：

<div class="comment-template"> 
    <div class="header">{title}</div> 
</div>

，然后在JS：

$.post('action', data, function(data) { 
     var template = $('.comment-template'); 
     var placeholder = $('#somePlaceholder'); 

     for(int i = 0; i < data.length; i++) { 
     var comment = template.clone(); 
     comment.html(comment.html.replace('{title}', data[i].title)); 
     comment.appendTo(placeholder); 
     } 
    }, 
    "json" 
);

这肯定会比在请求中包含标记更快地工作。

来源

2009-08-22 16:32:16 Mickel

这就是我所希望的，使用某种模板。我的脚本现在使用json响应，现在json返回，评论文本，日期用户ID号和照片URL在PHP会话变量中，所以我猜我需要将它们添加到JS var？另外你的上面有一行代码标题部分，我是否需要为每个项目，名称，照片和评论做这样的一行？ – JasonDavis 2009-08-22 17:03:54

对于更高级的模板，您可以使用助手库作为刚刚建议的人（http://jtemplates.tpython.com/）。否则，您将不得不替换每个值或在模板中使用另一个jQuery选择器和一个占位符。调用$ .post时在回调函数中使用的参数“data”将包含您的JSON对象（从php页面返回）。有了这个，你可以做任何你想要的。 – Mickel 2009-08-22 17:19:47

你可以这样做多方面：

您可以通过jQuery的创建一堆元素并建立你的DOM
你可以建立你想要的HTML作为你的ajax返回集的一部分（浪费带宽）
你可以创建一个模板并改变值。

IE：

<div id="someTemplate" style="display: hidden"> 
    <div class="username"></div> 
    ... 
</div>

现在你可以someTemplate的内容，复制它，通过类名填写详细信息，你是好。

来源

2009-08-22 16:17:13

+1我想看看jTemplates这个 – redsquare 2009-08-22 16:17:51

@redsquare，我不得不这样做自己，但从来没有看jTemplates（我还没有看任何东西，实际上）。感谢提及它！ – strager 2009-08-23 08:55:46

如果生成大量的HTML数据，那么你可以有你的PHP脚本返回的HTML，然后使用追加它：

$.post('/Url/', data, function(html) { 
    $('div#loader').append(html); 
}, "html");

到这样做的好处是，它很容易，并允许您重用服务器上的HTML生成。缺点是它比Json实现使用更多的带宽。

另一种方法是让脚本返回Json并通过DOM操作在客户端上构建HTML。

$.post('/Url/', data, function(x) { 
    var elm = document.createElement('div'); 
    elm.appendChild(document.createTextNode(x.comment); 
    $('div#loader').append(elm); 
}, "json");

这比使用HTML返回的带宽要少，但是如果HTML发生变化，创建/维护将会更加复杂。

来源

2009-08-22 16:18:11

“缺点是它使用更多带宽” - 我认为可以安全地假设从注释生成返回的HTML不会消耗大部分带宽。因此这是另一种过早优化的形式:) – amitkaz 2009-08-22 18:09:15

@amikazmi确实如此，但在与Json实现进行比较时仍然是一个缺点。我无法说出jasondavis将返回的HTML数量。我已经更新了我的答案，使其更清晰一些。 – 2009-08-23 08:14:57

如何在jquery的页面中插入大量html？

回答

相关问题