使用AJAX / Javascript / jQuery自动更新HTML / PHP表以淡入新结果并淡出旧结果

Question

I'm looking for the simplest possible method to automatically update the below every X seconds to fade in new results and fade out old results.

I have searched online but everything that I have found has been extremely complex so I was wondering what would be the simplest possible method to achieve this?

  <?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

You need to use AJAX, it's the only viable way to load new data without refreshing a page. What you've described is a common use of AJAX and there are many tutorials online, so I won't bother reinventing the wheel.

This is one that I found that teaches you how to load the data, and animate it in.

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