Question

我正在使用PHP和jquery开发一个评论脚本。

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

现在，除了将评论添加到我被卡住的页面的部分外，我已经完成了所有工作。我可以用这样的东西;

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

上面的代码会将文本/评论部分添加到评论div中但我需要它做更多然后只需添加文本，我需要它添加其他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

Answer 1

我绝对不建议您在请求中发送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"
);

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

Answer 2

你可以这么做：

您可以通过$('<div/>').html('Hi Mom')在jQuery中创建一堆元素并以这种方式构建您的DOM
您可以在ajax返回集（浪费带宽）
您可以创建模板并更改值。

IE：

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

现在你可以获取someTemplate的内容，复制它，按类名填写详细信息，然后就可以了。

Answer 3

如果您要生成大量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发生变化，则创建/维护会更复杂。

如何使用jquery将大量html插入到页面中？

3 个答案: