javascript - 使用 Jquery 和 ajax 更新 HTML 表

Question

我想使用 Ajax 和 Jquery 更新表数据而不刷新页面。

我知道我需要 setInterval() 方法，因为我希望向所有用户刷新表，因为多个用户可以将数据插入数据库，并且我想将表更新为每个用户。

我编写了一个脚本来从表单发送数据，而无需重定向用户或刷新页面，然后将其插入数据库中。

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();
    });
}); 

在我的 process.php 文件中，我将数据插入数据库。

现在我有 info.php 文件，它生成包含所有数据的表，并且我有一个表单可以插入新数据。

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

showUsers() 函数只是使用 SQL 中的数据生成表的其他行。

我不知道如何使用 Jquery 和 Ajax 刷新表。
我尝试使用 .load() 方法，但它也会为我的表单生成 html。

请帮忙。

Answer 1

正如您所说，您可以使用 setInterval 或更好的 setTimeout，因为您希望数据的返回稍后触发新请求

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