自动刷新 MySQL 查询结果在 PHP

Question

I have these DIVS which run PHP functions and return results. How can i make the returned results automatically refresh every X seconds without refreshing the whole page.

I just want to re-run the PHP/MySQL queries that are in the functions

<div class="container">

<div class="box"><h2>Callers Waiting</h2><?php echo CallersWaiting($queue_name, date('Y-m-d H:i:s', strtotime('-1 hour'))); ?></div>

<div class="box"><h2>Average Hold Time</h2><?php echo AverageHoldTime($queue_name, $date); ?></div>

<div class="box"><h2>Longest Wait Time</h2><?php echo LongestWaitTime($queue_name, $date); ?></div>

<div class="box"><h2>Shortest Wait Time</h2><?php echo ShortestWaitTime($queue_name, $date); ?></div>

</div>

UPDATE:

I have used this code:

<div class="container"></div>

<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('.container').load('data.php', function(){
           setTimeout(refreshTable, 2000);
        });
    }
</script>

then all my divs and PHP Functions run on a page called data.php but nothing is showing on my index.php page

Answer 1

<meta http-equiv="refresh" content="5; URL=http://www.yourdomain.com/yoursite.html">

regresh page after 5 sec and if you need js i can send it too

setTimeout(function(){
   window.location.reload(1);
}, 5000);

For ajax you need a page that return all you data in Json or xml form.

then you need to make $.POST or $.GET or $AJAX request to that page and then parse it and then update your html elements.

example

http://danielnouri.org/notes/2011/03/13/an-ajax-page-update-mini-tutorial/

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('data.php');
}, 2000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>

<div class="container">Loading data ...</div>

Answer 3

If you need to refresh a page when clicking on a div, you can use AJAX Poll , but if you want to update the element every specific period, your code must be like so

$(document).ready(function () {
    setInterval(function () {
        $.ajax({
            url: 'data.php',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                $("#your-element-id").html(data.your_data);
            },
            error: function (ERROR) {
                console.log(ERROR);
            }
        });
    }, 2000); // trigger this function every 2 sec.
});