javascript - 无法刷新数据来自mysql并通过php代码显示的表

问题描述

所以数据库中的数据每分钟都会出现一次，我可以毫无问题地获取 html 表中的数据，但我似乎无法刷新表。我现在的临时解决方案是每 5 秒刷新一次整个页面，这还不够好，因为每次我在输入字段中输入时，值都会消失。我可能经历了stackoverflow上的所有解决方案，但我无法让它们中的任何一个工作。我什至尝试过使用 jquery 的数据表，但它也不起作用。请帮我。任何帮助将不胜感激。以下是我的工作代码：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<style>
.student_label{
color:black;
font-size: 28px;
FONT-WEIGHT: 640;
}
</style>
</head>




<body">
<div class="container-fluid">

<div class="row">

<div class = "col-lg-6 col-sm-6 col-md-6 col-6">
<label class = "student_label">student:</label>
</div>

<div class = "col-lg-6 col-sm-6 col-md-6 col-6">

<input class="form-control" id="myInput" type="text" placeholder="Filter . .">

</div>
</div>

<div class="row mt-1">
<div class = "col-lg-12 col-sm-12 col-md-12 col-12">
<?php
$servername = "localhost";
$username = "";
$password = "";
$dbname = "schooldata";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$List = ["class1.table, class2.table"];

echo '<table id="maintable" class= "table table-sm table-bordered table-hover"><thead class = "thead-dark"><tr><th>Ticker</th><th>Ema Crossover</th><th>RSI Value</th></tr></thead>';

foreach($List as $value){
$append = "_students";
$sql = "SELECT *  FROM `".$value.$append."` ORDER BY id DESC LIMIT 1";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tbody id='myTable'><tr><td>" .  $row["id"]. "</td><td> " .  $row["student"]. "</td><td> " .  $row["class"]. "</tbody></td></tr>";
    }

} else {
    echo "0 results";
}

}


echo '</table>';

$conn->close();
?>
</div>
</div>



</div>
<script>

setTimeout(function(){
   window.location.reload(1);
}, 5000);


$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable, #main").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});




</script>



</body>
</html>

标签： javascriptphphtmljquerycss

您面临的问题与您所采取的方法有关。我将讨论该问题的一般解决方案，只是为您指明正确的方向。

考虑一下您上面的代码做了什么：

当一个请求进入您的 Web 服务器example.com/index.php（或任何您所称的）时，Web 服务器会启动 PHP 解释器，该解释器会遍历代码并准备一个完整的 HTML 页面。然后，Web 服务器将该页面传递回客户端。

了解 Web 服务器和 PHP 解释器如何协同工作很重要。你所设计的是一个网页——它就是这样，而且永远都是这样。如果你想自动更新网页的一部分，你需要做一些不同的事情，如下所示：

客户端请求一个像“example.com/index.php”这样的网页
Web 服务器执行代码index.php并将 HTML 页面发送回客户端
现在用户想要更新页面的一部分。客户端上运行的 Javascript 代码向不同的 URL 发出请求，该 URL 设置为仅发回客户端想要的部分
Web 服务器执行不同的代码，这些代码只发回需要更新的页面部分的数据
客户端上的 Javascript 接收此更新数据并更改现有页面以显示新数据。

这里的关键是您需要（至少）两条路线 - 一条发送页面，一条发送更新（因为您不想再次请求整个页面 - 这就是您在重新加载页面时所做的事情） .

一般而言，这就是它的完成方式。

javascript - 无法刷新数据来自mysql并通过php代码显示的表

问题描述

解决方案

推荐阅读