使用JQuery和JSON數據創建Div

我在下面有一些JSON數據，我想創建一個HTML div使用jQuery與AJAX JSON響應的一些數據。該div會成功的代碼中創建：使用JQuery和JSON數據創建Div

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#add-notes-form").submit(function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       type: 'POST', 
       url: '<?php the_permalink(); ?>', 
       dataType: 'json', 
       data: $("#add-notes-form").serialize(), 
       success: function(result){ 
        $("#tab7 form").after("Code needs to go here"); 
       } 
      }); 
     }); 
    }); 
</script>

JSON數據：

{"comment_ID":"2", 
"comment_post_ID":"396", 
"comment_author":"Me", 
"comment_author_email":"[email protected]", 
"comment_author_url":"http:\//gmail.com", 
"comment_author_IP":"", 
"comment_date":"2012-09-17 09:21:19", 
"comment_date_gmt":"2012-09-17 16:21:19", 
"comment_content":"This is a killer Note. 4", 
"comment_karma":"0", 
"comment_approved":"1", 
"comment_agent":"", 
"comment_type":"note", 
"comment_parent":"0", 
"user_id":"1"}

的HTML我試圖創建：

<div id="comment-2" class="binder-user-note"> 
    <a href="?delete=2" id="close-note"></a> 
    <h1>I added this on: Monday 17th September 2012</h1> 
    <p>This is a killer Note. 2</p> 
    <a href="edit?2" id="editnote"></a> 
</div>

我有什麼至今：

<div id="comment-'+response.comment_ID+'" class="binder-user-note"> 
    <a href="?delete='+response.comment_ID+'" id="close-note"></a> 
    <h1>I added this on: '+response.comment_date+'</h1> 
    <p>'+response.comment_content+'</p> 
    <a href="edit?'+response.comment_ID+'" id="editnote"></a> 
</div>

response是對象。

來源

2012-09-17 Loxzibit

success: function(result){ 
    var jSon = result.Data; 
    var div = $("<div></div>") 
      .attr("id", "comment" + jSon.comment_ID) 
      .addClass("binder-user-note"); 
    var a = $("<a></a>") 
      .attr("href", "?delete=" + jSon.comment_ID) 
      .attr("id", "close-note"); 
    $("<h1></h1>").text("I added this on: " + jSon.comment_date) 
      .appendTo(a); 
    $("<p></p>").text(jSon.comment_content) 
      .appendTo(a); 
    $("<a></a>") 
      .attr("href", "edit?" + jSon.comment_ID) 
      .attr("id", "editnote") 
      .appendTo(a); 
    a.appendTo(div) 
    $("#tab7 form").after(div); 
}

來源

2012-09-17 17:09:59 Vytalyi

我總是發現這樣的代碼真的很混亂。我個人更喜歡做這樣的事情，情況因人而異：

success:function(result){ 
    var html = "<div id='comment-"+result.comment_ID+"' class='binder-user-note'>" + 
       "<a href='?delete="+result.comment_ID+"' id='close-note'></a>" + 
       "<h1>I added this on: "+result.comment_date+"</h1>" + 
       "<p>"+result.comment_content+"</p>" + 
       "<a href='edit?"+result.comment_ID+"' id='editnote'></a>" + 
       "</div>"; 

    $("#tab7 form").after(html); 
    $('#add-notes-form textarea').attr('value',''); 
}

享受，

硅

來源

2012-09-18 09:43:53

使用JQuery和JSON數據創建Div

回答

相關問題