3

div以下にいくつかの JSON データがあり、AJAX JSON 応答からのデータの一部を使用して jQuery を使用して HTML を作成したいと考えています。は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はオブジェクトです。

4

2 に答える 2

5 
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-17T17:09:59.047 に答える
4

私はいつも、そのようなコードは本当に面倒だと思っています。個人的には、 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','');
}

楽しみ、

シ

于 2012-09-18T09:43:53.927 に答える