Jquery刷新div

I've got a certain php code in a div which gets data from mysql.I want this div to refresh every minute without refreshing the entire page.

Currently I'm using this, doesn't work well

<div id="abc">
<?php

?>
</div>

window.setTimeout('location.reload()', 60000);

The ideal way to do this is to use jQuery.ajax to retrieve data from your server, and then use JavaScript/jQuery within your success function to update your page.

You can still use setTimeout or equivalent to periodically issue AJAX requests.

Have the PHP-code on another page (for example; loaddata.php) and have a jQuery timer executing a function which loads the page loaddata.php

Loaddata.php

<?php
    echo "Hello World!";    
?>

index.php

<div id="data"></div>

<script>
    $('#div').load("loaddata.php", function() {
        window.setInterval("loadData", 60000);
    });

    function loadData()
    {
        $('#div').load("loaddata.php");
    }
</script>

Something like this:

function refreshContent() {
    $.post(urlHere, { data here...}, success(data) {
        //...manipulate DOM here...
    }
}

setTimeout(refreshContent, 60000);

Example of jQuery Ajax

file1.php

<?php
  echo 'PHP content e.g. from database based on submitted request - '.$_POST['my-value'];
?>

file2.html

<div class="content"></div>
<a href="#" class="reload-data"> Refresh div </a>

<script>
$(function(){
  $(".reload-data").click(function(){
    $.post("file1.php", {my-value: "something"}, function(data){
      $(".content").html(data);
    });
  });
});
setTimeout(function(){$(".reload-data").click();}, 60000);
</script>

For these situations I sometimes use jQuery.load()

Example from documentation:

<div id="result"></div>
<script type="text/javascript">
function refreshDiv() {
    $('#result').load('ajax/test.html #container', function(){ /* callback code here */ });
}
setInterval(refreshDiv, 10000);
</script>

This does the following:

  • Checks if the #result element is in the current page
  • If it is, it makes a request to the ajax/test.html page
  • Grabs the #container from the response, and dumps it into #result
  • And it does this every 10 seconds

That's about it. One line of code, although not as efficient as a true ajax request, it does the job.

As you want to refresh the div content every minute you need to look at setInterval method and load of jQuery:

window.setInterval(function(){
  $('#abc').load('PHPFile.php');
}, 1000);

and your PHP script mentioned in the url part of the load method must be capable to provide the result in HTML format which is going to be placed in the given div (id:abc)