Question

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

注意：每个帖子只加载两条评论，然后附加一个允许您加载更多内容的按钮。当您单击该按钮时，它会通过AJAX加载剩余的注释，并使用More comments更改Less comments按钮，这会在单击时将注释减少为2。

如果发表评论，我希望它能像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调用返回的新列表。

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

Answer 2

由于Javascript绑定，您正在覆盖请求变量，因此它可能会表现得很有趣。尝试这样的事情：

$('.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 request2 = $.ajax({
                url: "comments.php",
                type: "POST",
                data: {
                    post: post_id,
                    user: user_id
                },
                dataType: "html"
            });
            request2.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('');
        });
    });
 })

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

2 个答案: