使用Jquery和Ajax更新HTML表

Question

I want to update table data without refreshing the page using Ajax and Jquery.

I know I will need setInterval() method, because I want the table to be refreshed to all users, because multiple users could insert data in to the database and I want to update the table to every user.

I have made a script to send the data from a form without redirecting the user or refreshing the page and then insert it in the database.

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 my process.php file I insert the data to the database.

Now I have info.php file that generates my table with all the data and I have a form there to insert new data.

<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>

the showUsers() function just generate the other rows of the table with the data from SQL.

I have no idea how to refresh the table using Jquery and Ajax.
I tried to use the .load() method, but it also generates the html for my form.

Please help.

Answer 1

As you said, you can use setInterval or better setTimeout since you want the return of the data to trigger a new request later

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