如何使用jQuery从json响应中将这部分html插入页面？

Question

<script type="text/javascript">
var dataString2 = 'run=captchagood&comment=' + comment;
$.ajax({
    type: "POST",
    url: "process.php",
    data: dataString2,
    dataType: "json",
    error: 'error',
    success: function (data) {
        if (data.response === 'captchasuccess') { 
            $('div#loader').find('img.load-gif').remove();
            $('div#loader').append('<span class="success">Thanks for your comment!</span>');
            $('div#loader').hide().fadeIn('slow');
            $('span.limit').remove();
            $('ol#commentlist').prepend(data.comment);
            $('input#submit-comment').unbind('click').click(function () {
                return false;
            });
        };
    }
});
</script>

我需要上面的代码将以下代码附加到当前页面的评论列表中。

COMMENT-ID-NUMBEER =这将是上面json响应的一部分
COMMENT-POST-DATE =这将是上面json响应的一部分
COMMENT-TEXT =这将是上面json响应的一部分

USER-GENDER =这在PHP会话中
USER-IMAGE-URL =这在PHP会话中
USER-NAME =这在PHP会话中

这是我需要在页面中插入的以下代码，但我直接在上面列出的项目也要插入适当的位置。

<ol class="commentlist" id="commentlist">


    <!-- START Comment block -->
    <li class="thread-even"  id="COMMENT-ID-NUMBEER"> 
        <div class="photocolumn"> 
            <div class="imageSub" style="width: 100px;"> 
                <img class="USER-GENDER" src="USER-IMAGE-URL" width="100"/>
                <div class="blackbg"></div>
                <div class="label">USER-NAME</div>
            </div>
        </div>
        <div class="commenttext"> 
            <span class="comment_date">COMMENT-POST-DATE</span>
            <p>COMMENT-TEXT</p> 
        </div> <!-- END COMMENTTEXT -->
        <div class="modcolumn">
            <a href=""><img class="delete " src="../../images/icons/error.gif"></a> 
            Delete
        </div>
    </li> 
    <!-- END comment block-->

</ol>   

另一个问题是，列表单元格在脚本中交替显示背景颜色，因此如何根据上一项插入class =“ thread-even”或class =“ thread-odd”？

Answer 1

我建议将该HTML块作为模板隐藏在页面上。 当您获得ajax响应时，请使用jquery克隆它，插入实例特定的数据，然后将其附加到您的页面。

要替换注释类，只需检查最后一个注释类，然后使用相反的类。 当然，您需要为第一条评论使用默认类。

例：

将其放置在页面上的某处，并被CSS或javascript隐藏：

<!-- START Comment block -->
<li class="thread-even"  id="comment_template"> 
    <div class="photocolumn"> 
            <div class="imageSub" style="width: 100px;"> 
                    <img class="USER-GENDER" src="USER-IMAGE-URL" width="100"/>
                    <div class="blackbg"></div>
                    <div id="username" class="label">USER-NAME</div>
            </div>
    </div>
    <div class="commenttext"> 
            <span class="comment_date">COMMENT-POST-DATE</span>
            <p>COMMENT-TEXT</p> 
    </div> <!-- END COMMENTTEXT -->
    <div class="modcolumn">
            <a href=""><img class="delete " src="../../images/icons/error.gif"></a> 
            Delete
    </div>
</li> 
<!-- END comment block-->

接下来，在您的成功回调中，您将需要执行上述操作。 这是一个入门的示例：

//clone your template
var comment = $('#comment_template').clone();

//insert instance specific data
$('#username', comment).html(USERNAME);
$('.comment_date', comment).text(DATE);
//do the rest

//append it to your page
$('#commentlist').append(comment);

Answer 2

jTemplate应该符合要求。 直接下载，其中包含一个示例项目，其中包含您要从事的工作...或尝试一些 博客文章以获取快速示例。 目的是针对重复的段，但对于无论是否重复的模板化模板都可以正常工作。

Answer 3

为什么不让服务器端将HTML作为JSON对象的键之一返回。 您应该已经具有显示准备好的注释的所有逻辑，因此在data.htmlComment返回它的“ HTML格式”版本并不难。

Answer 4

针对您的第二个问题：

“另一个问题是，列表单元格在脚本中会交替显示背景色，因此如何根据上一项插入class =“ thread-even”或class =“ thread-odd”？

测试最后一个元素是否具有偶数类（如果是），则为其赋予奇数类，反之亦然：

if ( $("#mylist > :last").is(".thread-even") ){
    $(/* thing appending to */).append( /* whatever */ );
    $("#mylist > :last").addClass('thread-odd');
} else if ( $("ul > :last").is(".thread-odd") ){
    $(/* thing appending to */).append( /* whatever */ );
    $("#mylist > :last").addClass('thread-even');
}

使用的选择器选择指定ID的最后一个子代。 一旦附加了最后一个孩子，就应该是给新类提供的东西，因此您可以使用相同的选择器;）可能会有更好的方法将其适合您的代码，但是代码片段应该为您提供需要让它工作...祝你好运:)