Refresh HTML-Tabelle mit Javascript

Question

Ich entwickle derzeit einen einfachen Kommentar Abschnitt und sobald es eine neue Daten in die Datenbank eingefügt wird, wird die Tabelle geladen. Nicht die ganze Seite. Meine Frage ist, wie man die Tabelle mit Javascript aktualisiert, indem man die Frage in die gleiche Akte wie das Javascript lädt?

comments.php

<?php 
    $getcomment = $conn->prepare("SELECT * FROM comments INNER JOIN document ON document.doc_groupid = comments.comment_doc INNER JOIN user ON user.user_matricno = comments.comment_user WHERE document.doc_id = :document ORDER BY comments.comment_timestamp DESC"); 
    $getcomment->bindParam(':document', $document, PDO::PARAM_STR); 
    $document = $_GET['doc']; 
    $getcomment->execute(); 
    readcomment = $getcomment->fetchAll(); 
    $countc = $getcomment->rowCount(); 

    foreach ($readcomment as $rc) { 
    echo 
    ' 
          <table class="table table-responsive nowrap table-hover"> 
          <tr> 
           <th style="border-top: #FFFFFF;pointer-events: none;">'. $rc["comment_subject"] .'</th> 
           <td class="pull-right" style="border-top: #FFFFFF;pointer-events: none;">by <strong>'. $rc["user_fname"].' '.$rc["user_lname"] .'</strong><small>&nbsp;'. time_elapsed_string($rc['comment_timestamp']).'</small></td> 
           </tr> 
          <tbody> 
           <tr> 
           <td colspan="2">'. $rc['comment_text'] .'</td> 
           </tr> 
          </tbody> 
          </table>'; 
    } 
?> 
<div id="tablecomment"></div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     refreshTable(); 
    }); 

    function refreshTable(){ 
     $('#tablecomment').load('comments.php', function(){ 
      setTimeout(refreshTable, 5000); 
     }); 
    } 
</script> 

Answer 1

Sie müssen Ajax verwenden, um dies zu erreichen.

https://www.w3schools.com/xml/ajax_intro.asp

Es ist ein bisschen zu komplex in einem einzigen Kommentar zu beschreiben, und es gibt viele gute Tutorials gibt. Aber wollen Sie tun möchten, ist ähnlich wie das, was Sie bereits tun. Legen Sie ein Timout fest, um Ajax aufzurufen (wodurch die Datenbankdaten abgerufen werden), und aktualisieren Sie die Tabelle damit.

Achten Sie darauf, dass keine Race Conditions auftreten, bei denen die Daten einer früheren Anfrage nach einer neuen Anfrage eingehen