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

时间:2014-04-25 12:10:25

标签: javascript php jquery html css

我正在寻找最简单的方法,每隔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);

  }

  ?>

2 个答案:

答案 0 :(得分:1)

您需要使用AJAX,它是在不刷新页面的情况下加载新数据的唯一可行方法。您所描述的是AJAX的常见用法,并且有很多在线教程,所以我不打扰重新发明轮子。

我发现

This is one教会您如何加载数据并为其设置动画。

答案 1 :(得分:0)

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