使用AJAX / Javascript / jQuery自動更新HTML / PHP表以淡入新結果並淡出舊結果

Question

我正在尋找最簡單的方法來每隔X秒自動更新以下內容，以淡出新結果並淡出舊結果。

我已經在網上搜索過，但是發現的一切都非常復雜，所以我想知道實現這一目標的最簡單方法是什么？

  <?php

  error_reporting(E_ALL);
  ini_set('display_errors', 1);

  include('core/connection.php');

  if($conn){ 

  $stid = oci_parse($conn, "

    SELECT OrderNo, InvoiceNo
    FROM Orders
    WHERE rownum <= 5
    ORDER BY rownum DESC

  ");
  oci_execute($stid);

  echo "<table class='table table-hover '>
        <thread>
        <tr>
        <th>OrderNo</th>
        <th>InvoiceNo</th>
        <th></th>
        </tr>
        </thread>
        <tbody>";

  while ($row = oci_fetch_array($stid, OCI_ASSOC)) {

    echo "<tr>";
    echo "<td>" . $row['OrderNo'] . "</td>";
    echo "<td>" . $row['InvoiceNo'] . "</td>";
    echo "</tr>";
    unset($row);

  }

  echo "</tbody>
        </table>";

  oci_free_statement($stid);
  oci_close($conn);

  }

  ?>

Answer 1

您需要使用AJAX，這是加載新數據而不刷新頁面的唯一可行方法。 您所描述的是AJAX的常用用法，並且在線上有許多教程，因此我不會費心重新設計輪子。

我發現這是一個教您如何加載數據和對其進行動畫處理的方法。

Answer 2

function getNewData(){
    //hide the original data
    $('.table.table-hover').hide(500, function(){
        var $this = $(this); //cache reference to the original table
        $.ajax({
            type: 'GET', //get or post request
            url: '/path/to/my/script.ext', //path to your script
            success: function(data){ //if no issues performing the request
                $this.replaceWith(data); //replace the original table with the new table data
            }
        });
    });
} 
setTimeout(function(){
    getNewData();
}, 5000); //update every 5 seconds