时间戳

首页 > 解决方案 > 页面加载时如何运行js获取数据？

javascript - 页面加载时如何运行js获取数据？

问题描述

我希望页面运行 form.js 并在页面加载时从 read.php 加载数据。每隔几秒自动刷新一次表格，而不是点击刷新按钮。这可能吗？我该如何做到这一点？

// index.html
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="/dashboard/form.js"></script>
  </head>
  <body>
    <form action="read.php" method="POST">
        <button type="submit" class="btn btn-primary">Refresh</button>
    </form>
    <table class="table" id="tableRefresh">
        // table content
    </table>
  </body>

// form.js
$(document).ready(function () {
    $("form").submit(function loadDetails (event) {
        $.ajax({
            type: "POST",
            url: "read.php",
            dataType: "json",
        }).done(function (data) {
            console.log(data);
            if (data.success) {
                $("#tableRefresh").html(
                    // edit table content
                )
            }
        });
        event.preventDefault();
    });
});

标签： javascriptphphtmljquerymysql

解决方案

您可以优化 form.js 代码文件以在指定的时间间隔自动获取/刷新数据，如下所示：

function loadData() {
  $.ajax({
    type: "POST",
    url: "read.php",
    dataType: "json",
  }).done(function(data) {
    console.log(data);
    if (data.success) {
      $("#tableRefresh").html(
        // edit table content
      )
    }
  });
}

$(document).ready(function() {
  setInterval(loadData, 10000); // refresh data every 10 secs
});

推荐阅读