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

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的常見用法，網上有很多教程，所以我不打算重新發明輪子。

This is one，我發現，教你如何加載數據，並在製作動畫。

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