javascript - AJAX 中的 AJAX 没有按预期工作？

Question

与 Facebook 评论系统一样，当您发表评论时，您的评论会附加到之前的评论中并立即显示。这就是我要在这里实现的目标。虽然评论被附加，但在它出现之前必须重新加载页面。

注意:每个帖子都只加载了两条评论，然后附加了一个允许您加载更多评论的按钮。当您单击该按钮时，它会通过 AJAX 加载剩余评论，并将 More comments 按钮更改为 Less comments，从而在单击时将评论减少为两条。

如果是评论，我希望它像 Facebook 那样工作，同时如果用户没有点击 More comments 按钮，它应该自动显示剩余评论和新评论用户刚刚发表评论。

HTML :

<div class='feeds'>
<div class='post'>
<h5> Post Header </h5>
<p> post 1 2 3 </p>
<a href ='#' class = 'comment'>Comment</a>
<div class='comments'>
    <div class='comment_data>
      <div class = ' per_comment '>
        <p> Comment 1</p>
      </div>
      <div class = 'per_comment '>
        <p> Comment 2</p>
      </div>
        <button class='morecomments ' value='7' type='submit '>
        More comments</button>
        <div class = 'commentdiv'>
            <textarea autocomplete = 'off' class='commenttext form-control' rows = '1' placeholder='Have your say...'></textarea>
            <button class='comment btn btn-xs btn-primary onespacedown' value = '7' type='submit'>Comment</button>
        </div>

    </div> <!-- end of comment_data div -->
</div> <!-- end of post div -->

---

这就是 AJAX:

$('.feeds').on('click', '.comment', function () {
var $this = $(this);
var post_comment = $this.parents('.feeds').find('.commenttext').val();
var post_id = $(this).val();
var user_id = $(".user_id").text();
var request = $.ajax({
      url: "insertcomment.php",
      type: "POST",
      data: { post : post_id , user : user_id, comment: post_comment },
      dataType: "html"
    });
    request.done(function( msg ) {    
        var $pc = $this.parents('.feeds').find('.comment_data');
        var $button = $this.prev('.pullcomments');
        //if the comments are already loaded then don't load it again just display it
            var request = $.ajax({
                url: "comments.php",
                type: "POST",
                data: {
                    post: post_id,
                    user: user_id
                },
                dataType: "html"
            });
            request.done(function (msg1) {
                html(msg1).appendTo($pc);
                $button.slideDown();
                $this.replaceWith("<button class='lesscomments pullcomments' value='7' name = 'more' type='submit'><span class='glyphicon glyphicon-chevron-up'></span></button>"); 
                $this.parents('.feeds').find('.commenttext').val('');
        });
    });
 })

---

Answer 1

尝试更改以下行:

html(msg1).appendTo($pc);

为此，如果 ajax 调用仅返回新添加的评论:

$pc.prepend(msg1);

如果有的话，这会将返回的 html 放在最后一个“per_comment”元素之后。否则，它将把它作为“comment_data”元素的第一个子元素。

为此，如果 ajax 调用返回所有评论:

$pc.children('.per_comment').remove();
$pc.prepend(msg1);

这会删除评论列表，然后插入由 ajax 调用返回的新列表。

编辑:我看到您按降序显示评论，所以我假设您希望新评论位于顶部。