Auto refresh a php variable in html page
I have an HTML page with a div containing the value of a php variable, which is from a mysql query. I want the div to auto-refresh in order to see any new data from an SQL query. I searched a week for the right code, but nothing... . The div code is the following:
<div id="last10">
<table width="838" cellpadding="1" cellspacing="1" class="categorie1">
<tr st开发者_JAVA百科yle='font: bold 12px verdana;'>
<td width="149" align="center">Browser</td>
<td width="99" align="center">OS</td>
<td width="248" align="center">Date</td>
<td width="103" align="center">IP</td>
<td width="108" align="center">Country</td>
<td width="110" align="center">Referrer</td>
</tr>
{$recent_visits}
</table>
</div>
PHP is a server-side language, HTML and JavaScript are client-side. So, you need to use AJAX to update some data in HTML/JavaScript using PHP
You're going to need to use AJAX if you want to resist a whole page refresh. Basic steps:
- Create either a new page or a specific function of the current page just for retrieving the new value. This can be
get_recent_visits_count.phporcurrent_page.php?get_recent_visits. - Look up making AJAX calls (I recommend using jQuery's
getfor simplicity) and retreve the value - Place that value on the page.
- Once you are able to get the information, place that code in a
setInterval(or alike) and have it refresh periodically.
If you want to keep the code on the same page try something like this (added to the top of the page):
<?php
if (isset($_GET['get_recent_visits']))
{
// query your DB for just the numeric value and echo it here.
exit;
}
?>
Then, in your HTML page try something like the following:
1st, place an element you want to populate with the new value on the page:
<span id="recent-visits"></span>
Then, in the <head> section of your page you're going to need to include jQuery and the ajax code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
// wait for document to be ready
$(function(){
// make the code execute every so many seconds (time assigned at bottom)
setInterval(function(){
// make the ajax call to the same page, passing it the GET variable so
// it only echos the number we want
$.get('<?php echo $_SERVER['REQUEST_URI']; ?>?get_recent_visits',function(num){
// echo that number we just retrieved to the span we placed on the page
$('#recent-visits').text(num);
});
}, 30 * 1000); // run every 30 seconds
});
</script>
The above is just a simple way to get a single number to display on the page, but should get your feet wet. PHP offers the ability to dump JSON objects using json_encode which can be paired with jQuery's .getJSON to return more complex objects.
You'll have to use some use some ajax magic if you want the data to refresh automatically. More info is needed really. What's $recent_visits?
I needed something similar a while back for my own project. I know I'm a "little" late but I'm hoping this could help other people looking for the same solution.
First, make a file. Let's call it data.php. This file should contain all your code to retrieve data from your database and this is where you put any relevant data into variables. This is some example code from my own project:
<?php
$cpu_load = sys_getloadavg();
$total_storage = disk_total_space("/");
$free_storage = disk_free_space("/");
$public_ip = file_get_contents("public_ip.txt");
?>
All this code does is it sets the variables and this is the only bit that will periodically be refreshed. You also need to add the contents of the DIV here (without the DIV tags though). This part should look something like this (obviously replacing my example variables):
<table width="838" cellpadding="1" cellspacing="1" class="categorie1">
<tr style='font: bold 12px verdana;'>
<td width="149" align="center">Average CPU Load: <?php echo $cpu_load; ?></td>
<td width="99" align="center">Total Storage: <?php echo $total_storage; ?></td>
<td width="248" align="center">Free Storage: <?php echo $free_storage; ?></td>
<td width="103" align="center">Public IP: <?php echo $public_ip; ?></td>
</tr>
</table>
Next, in your main page you could use something like this:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#refresh").click(function() {
$("#last10").load("data.php");
return false;
});
});
function refresh() {
$("#refresh").click();
}
setInterval(refresh, 100);
</script>
<a href="#" id="refresh" hidden="">Refresh</a>
<div id="last10"></div>
This simply creates a hidden link and "clicks" it to refresh the div.
I think this should answer your question. Ask in comments if you need any clarification. Hope this helps some people :)
加载中,请稍侯......
精彩评论