Aktualisieren der HTML-Tabelle mit Jquery & Ajax

Question

Ich möchte Tabellendaten aktualisieren, ohne die Seite mit Ajax und Jquery zu aktualisieren.

Ich weiß, ich brauche setInterval() Methode, weil ich möchte, dass die Tabelle für alle Benutzer aktualisiert werden, da mehrere Benutzer Daten in die Datenbank einfügen können und ich die Tabelle für jeden Benutzer aktualisieren möchte.

Ich habe ein Skript erstellt, um die Daten aus einem Formular zu senden, ohne den Benutzer umzuleiten oder die Seite zu aktualisieren und dann in die Datenbank einzufügen.

MyScript.js

$(document).ready(function() { 
    console.log("Ready!"); 
    //Submitting from data 
    $("#submitForm").submit(function(e){ 
     if($('#fName').val() && $('#lName').val() && $('#nickname').val()) { 
      $.ajax({ 
       type: "POST", 
       url: "process.php", 
       data: $("#submitForm").serialize(), 
       success: function(data){ 
        console.log(data); // show response from the php script. 
       } 
      }); 
     } 
     else { 
      alert("Please fill the fields.") 
     } 
     e.preventDefault(); 
    }); 
}); 

In meiner process.php Datei einfügen ich die Daten in die Datenbank.

Jetzt habe ich info.php Datei, die meine Tabelle mit allen Daten generiert und ich habe ein Formular, um neue Daten einzufügen.

<div id="table" class="col-md-7 ml-5"> 
    <table class="table table-striped table-bordered table-hover table-sm"> 
    <thead class="thead-default"> 
     <tr> 
     <th>#</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Nickname</th> 
     <th>User ID</th> 
     </tr> 
    </thead> 
    <?php $user->showUsers(); ?> 
    </table> 
</div> 

die showUsers() Funktion erzeugt nur die anderen Zeilen der Tabelle mit den Daten von SQL.

Ich habe keine Ahnung, wie Sie die Tabelle mit Jquery und Ajax aktualisieren.
Ich habe versucht, die .load() Methode zu verwenden, aber es generiert auch den HTML-Code für mein Formular.

Bitte helfen.

Answer 1

Wie Sie gesagt haben, können Sie setInterval oder besser setTimeout verwenden, da Sie die Rückgabe der Daten wollen eine neue Anforderung auslösen später

var tId=""; 
function getInfo() { 
    $.get("info.php #table",function(data) { 
    tId = setTimeout(getInfo,60000); 
    $("#someContainer").append(data); 
    }); 
} 
getInfo();