dswsl2016 2009-08-22 18:56
浏览 76
已采纳

如何使用jquery从json响应中将此html块插入到页面中?

<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>

I need the above to append the below code to a comment list on the current page.

COMMENT-ID-NUMBEER = this will be part of the json response above
COMMENT-POST-DATE = this will be part of the json response above
COMMENT-TEXT = this will be part of the json response above

USER-GENDER = this is in the PHP session
USER-IMAGE-URL = this is in the PHP session
USER-NAME = this is in the PHP session

Here is what I need to insert into the page, the below code but with the items I list directly above to be inserted into the proper locatons as well.

<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>   

Another question, the list cells alternate background color in my script, so how could I make it insert class="thread-even" or class="thread-odd" depending on the last item?

  • 写回答

4条回答 默认 最新

  • dongsheng1698 2009-08-22 19:22
    关注

    I recommend having that block of html already hidden on the page as a template. When you get your ajax response, clone it with jquery, insert instance specific data, and then append it to your page.

    To alternate the comment classes, simply check the last one and use the opposite class. Of course, you'll need a default class for the first comment.

    Example:

    Have this somewhere on your page, hidden by CSS or 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-->
    

    Next, in your success callback, you will need to do what I stated above. Here is an example to get you started:

    //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);
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果