无法刷新数据来自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>
评论
  • qnon
    qnon 回复

    您确实需要使用Java语言才能正常工作。由于PHP是在服务器端呈现的,因此您将无法使它仅与PHP一起使用。页面进入浏览器后,将没有服务器可重新渲染页面。

    你不得不

    • 创建一个API端点,使用PHP将数据库内容作为JSON返回
    • 使用Javascript .fetch连接到该新端点并从那里获取数据
    • 使Javascript相应地更新表
    • 每5秒调用一次Javascript方法

    这里给您的感觉是如何实现它的快速而非真正的伪代码“预览”。

    api.php

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: access");
    header("Access-Control-Allow-Methods: GET");
    header('Content-Type: application/json');
    
    // add some try catch around this
    $pdo = Create DB Connection
    $data = $pdo fetch data
    http_response_code(200);
    echo json_encode($data);
    

    render.js

    cont reload = function() {
     fetch('/api') // get the data from API
      .then((response) => {
        return response.json(); // decode json
      })
      .then((data) => {
         // Find out whats new in (data) - or completely re-render the table using Javascript
        [CODE]
        setTimeout(reload, 5000); // then, after 5 seconds, reload again
      });
    }
    
    reload();
    
  • Wooll
    Wooll 回复

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

    考虑上面的代码做什么:

    When a request comes in to your web server for example.com/index.php (or whatever you're calling it), the web server fires up the PHP interpreter, which goes through the code and prepares a full HTML page. The web server then passes that page back to the client.

    了解网络服务器和PHP解释器如何协同工作非常重要。您设计的是一个网页-仅此而已,这就是它的全部。如果要自动更新部分网页,则需要执行其他操作,例如:

    1. the client requests a web page like 'example.com/index.php'
    2. the web server executes the code in index.php and sends an HTML page back to the client
    3. now the user wants to update part of the page. Javascript code running on the client makes a request to a different URL that's set up to send back only the part the client wants
    4. the web server executes different code that sends back only the data for the part of the page that needs updating
    5. Javascript on the client receives this updated data and changes the existing page to show the new data.

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

    概括地说就是这样。