Question

下面我有一些JSON数据，我想使用jQuery和AJAX JSON响应中的一些数据创建一个HTML div。 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":"me@gmail.com",
 "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是对象。

Answer 1

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);
}

Answer 2

我总是觉得这样的代码非常混乱。我个人更喜欢做这样的事情，ymmv：

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','');
}

享受，

的Si

使用JQuery和JSON数据创建Div

2 个答案: