setInterval을 사용하여 페이지 새로 고침

Question

setInterval 함수를 만들어 새 메모를 확인하고 선택하여 게시하려고합니다. 지금까지는 일종의 '일종의'일이지만, 내가 원하는 방식이 아닙니다. 3 초마다 모든 의견을 다시 게시하는 대신 모든 의견을 다시 게시합니다.

댓글을 새로 고치는 것만으로 나는 무엇이 잘못 되었습니까?

HTML

<form action="" method="POST" id="comment-form"> 
      <textarea id="home_comment" name="comment" placeholder="Write a comment..." maxlength="1000" required></textarea><br> 
      <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> 
      <input id="comment-button" name="submit" type="submit" value="Post"> 
     </form> 
     <div id="comment-container"> 

AJAX

function commentRetrieve(){ 

$.ajax({ 
     url: "ajax-php/comment-retrieve.php", 
     type: "get", 
     success: function (data) { 
     // console.log(data); 
      if (data == "Error!") { 
       alert("Unable to retrieve comment!"); 
       alert(data); 
      } else { 
       $('#comment-container').prepend(data); 
      } 
     }, 
     error: function (xhr, textStatus, errorThrown) { 
      alert(textStatus + " | " + errorThrown); 
      console.log("error"); //otherwise error if status code is other than 200. 
     } 
    }); 


} 
setInterval(commentRetrieve, 300); 

PHP

$user = new User(); 

    $select_comments_sql = " 
    SELECT c. *, p.user_id, p.img 
    FROM home_comments AS c 
    INNER JOIN (SELECT max(id) as id, user_id 
       FROM profile_img 
       GROUP BY user_id) PI 
     on PI.user_id = c.user_id 
    INNER JOIN profile_img p 
     on PI.user_id = p.user_id 
    and PI.id = p.id 
    ORDER BY c.id DESC 
"; 

if ($select_comments_stmt = $con->prepare($select_comments_sql)) { 
    //$select_comments_stmt->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $select_comments_stmt->execute(); 
    //$select_comments_stmt->bind_result($comment_id, $comment_user_id, $comment_username, $home_comments, $comment_date, $commenter_user_id, $commenter_img); 
    //$comment_array = array(); 
    $rows = $select_comments_stmt->fetchAll(PDO::FETCH_ASSOC); 
    foreach ($rows as $row) { 
     $comment_id = $row['id']; 
     $comment_user_id = $row['user_id']; 
     $comment_username = $row['username']; 
     $home_comments = $row['comment']; 
     $comment_date = $row['date']; 
     $commenter_user_id = $row['user_id']; 
     $commenter_img = $row['img']; 
     $commenter_img = '<img class="home-comment-profile-pic" src=" '.$commenter_img.'">'; 
     if ($home_comments === NULL) { 
      echo 'No comments found.'; 
     } else { 
      echo '<div class="comment-post-box">'; 
      echo $commenter_img; 
      echo '<div class="comment-post-username">'.$comment_username. '</div>'; 
      echo '<div>'.$comment_date. '</div>'; 
      echo '<div class="comment-post-text">'.$home_comments. '</div>'; 
      echo '</div>'; 
     } 
    } 
} 

Answer 1

당신이 의견이 때 새 인쇄 때문입니다. 내가 뭘 제안하는 주석 배열을 얻으려면 각 의견에 ID를 전달하고 ID가 allready 목록에 존재하는지 확인 JSON을 사용하는 것입니다. 더 나은 개선을 위해 당신은 단지 새로운 코멘트를 붙여 그 방법이 여기 예 :
HTML의

<form action="" method="POST" id="comment-form"> 
     <textarea id="home_comment" name="comment" placeholder="Write a comment..." maxlength="1000" required></textarea><br> 
     <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> 
     <input id="comment-button" name="submit" type="submit" value="Post"> 
    </form> 
    <div id="comment-container"> 
     <div id="comment-1">bla bla bla</div> 
    </div> 

JS

function commentRetrieve(){ 

$.ajax({ 
    url: "ajax-php/comment-retrieve.php", 
    type: "get", 
    success: function (data) { 
    // console.log(data); 
     if (data == "Error!") { 
      alert("Unable to retrieve comment!"); 
      alert(data); 
     } else { 
      var array = JSON.parse(data); 
      $(array).each(function($value) { 
       if($('#comment-container').find('#comment-' + $value.id).length == 0) { 
        $('#comment-container').prepend($value.html); 
       } 
      }); 
     } 
    }, 
    error: function (xhr, textStatus, errorThrown) { 
     alert(textStatus + " | " + errorThrown); 
     console.log("error"); //otherwise error if status code is other than 200. 
    } 
}); 


} 
setInterval(commentRetrieve, 300); 

PHP

$user = new User(); 

$select_comments_sql = " 
SELECT c. *, p.user_id, p.img 
FROM home_comments AS c 
INNER JOIN (SELECT max(id) as id, user_id 
      FROM profile_img 
      GROUP BY user_id) PI 
    on PI.user_id = c.user_id 
INNER JOIN profile_img p 
    on PI.user_id = p.user_id 
and PI.id = p.id 
ORDER BY c.id DESC 
"; 

if ($select_comments_stmt = $con->prepare($select_comments_sql)) { 
//$select_comments_stmt->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
$select_comments_stmt->execute(); 
//$select_comments_stmt->bind_result($comment_id, $comment_user_id, $comment_username, $home_comments, $comment_date, $commenter_user_id, $commenter_img); 
//$comment_array = array(); 
$rows = $select_comments_stmt->fetchAll(PDO::FETCH_ASSOC); 
foreach ($rows as $row) { 
    $comment_id = $row['id']; 
    $comment_user_id = $row['user_id']; 
    $comment_username = $row['username']; 
    $home_comments = $row['comment']; 
    $comment_date = $row['date']; 
    $commenter_user_id = $row['user_id']; 
    $commenter_img = $row['img']; 
    $commenter_img = '<img class="home-comment-profile-pic" src=" '.$commenter_img.'">'; 
    if ($home_comments === NULL) { 
     echo 'No comments found.'; 
    } else { 
     $html = ""; 
     $html .= '<div class="comment-post-box">'; 
     $html .= $commenter_img; 
     $html .= '<div class="comment-post-username">'.$comment_username. '</div>'; 
     $html .= '<div>'.$comment_date. '</div>'; 
     $html .= '<div class="comment-post-text">'.$home_comments. '</div>'; 
     $html .= '</div>'; 
     array('id' => $comment_id, 'html' => $html) 
    } 
} 
} 

, 난 보기를 제안 할 것이다. 더 많은 실시간 업데이트를 위해 NodeJs 소켓에 연결합니다. 여기에 몇 가지 링크가 있습니다.

Official NodeJs Website
Official SocketIo Website
Chat tutorial with socketIo and Nodejs
는 희망이 도움이!

• 닉