AJAX內的AJAX無法按預期工作？

Question

與Facebook評論系統一樣，當您評論時，您的評論將被添加到之前的評論中並一次顯示。這就是我想在這裏實現的。儘管註釋會被添加，但在顯示之前，必須重新加載頁面。

注意：每個帖子都只加載了兩個評論和一個按鈕，這將允許您加載更多，然後附上。點擊按鈕時，它會通過AJAX加載剩餘的評論，並使用Less comments更改More 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); 

這將在最後一個「per_comment」元素之後放置返回的html，如果有的話。否則，它會將其作爲「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(''); 
     }); 
    }); 
})