如何將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>

我需要上面的代碼將下面的代碼附加到當前頁面的註釋列表中。如何將json響應中的這個html塊插入到頁面中？

COMMENT-ID-NUMBEER =這將是以上
COMMENT-POST-DATE JSON響應的一部分=這將是以上
COMMENT-TEXT JSON響應的一部分=這將是JSON響應的一部分上述

用戶性別=這是在PHP會議
USER-IMAGE-URL =這是在PHP會議
USER-NAME =這是在PHP會議

這是我需要的插入到頁面，下面的代碼，但與它ems我直接列在上面插入到正確的位置。

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

另一個問題，在我的腳本列表中的細胞替代的背景顏色，所以我怎麼可能讓它插入類=「線程甚至」或類=「線程奇」取決於最後一個項目？

來源

2009-08-22 JasonDavis

我建議讓那個已經隱藏在頁面上的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);

來源

2009-08-22 19:22:23 slypete

你知道任何教程或任何地方顯示如何做到這一點嗎？我真的不想使用th e jTemplates插件，對於如此小的任務它確實很大99kb – JasonDavis 2009-08-22 22:02:26

更新了我的答案以提供示例。 – slypete 2009-08-22 22:59:57

jTemplates應符合法案。直接進入下載，它包含一個示例項目，其中包含您要做的事情...或者嘗試使用a few blog posts以獲取快速示例。它的意圖是重複的段，但它適用於任何模板重複或不重複。

來源

2009-08-22 19:43:33

爲什麼不讓你的服務器端返回HTML作爲你的JSON對象的關鍵之一。您應該已經擁有所有邏輯來顯示準備好的評論，因此在data.htmlComment中返回「HTML格式化」版本並不會那麼困難。

來源

2009-08-22 21:36:17 gnarf

在回答你的第二個問題：

「還有一個問題，在我的腳本列表中的細胞替代的背景顏色，所以我怎麼能讓它插入類=」線程甚至「或類=」線程「餘」取決於最後一項？「

測試如果最後元件具有偶數類，如果是，給它奇數類，反之亦然：


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的最後一個子。一旦你添加了最後一個孩子應該是你需要給新類的東西，所以你可以使用相同的選擇器;）可能有更好的方法來適應你的代碼，但片段應該給你你的東西需要得到它的工作......祝你好運:)

來源

2009-08-23 13:34:45 sillyMunky

不接受任何答案或對任何答案進行投票...以另一種方式解決了問題？請分享！ – sillyMunky 2009-09-07 13:17:12

如何將json響應中的這個html塊插入到頁面中？

回答

相關問題