Updating page when mysql changes?
I have got a page on a website, that works similar to 开发者_运维问答a reverse auction. It has a javascript countdown timer that runs down depending on how long the auction is. When it hits zero the auction ends and page refreshes.
All works like a dream, but the problem is if a bid is put in I wanted the page to refresh displaying that bid, and update many other elements.
The site currently does this by checking a php file via flash and when flash notices the change refreshes the page. This is fine, but we wont to remove flash and only use javascript so we don't have any problems running the site on iPhones/iPads and other mobile devices.
So, after a long winded build-up I need a solution, be this AJAX or another method, any help more than welcome here...
Thanks in advance
I did something like what you want without using jQuery; I didn't want to install jQuery just for one function. This is a bit generic because the code I actually used would be meaningless to anyone else. I used a PHP page in an iframe to periodically check to see if a key field in the database changed. If it changed the PHP script set a cookie. In the main page some javascript reads the cookie periodically and refreshes the page if the cookie indicated that the data had changed. Here is approximately what I did. I modified the code so that it is not specific to my needs.
First you need a short PHP page to periodically check the database (the main page needs to set the appropriate cookies):
<?
//This page is named "check.php"
$OldTimestamp = $_COOKIE["timestamp"];
$id = $_COOKIE["id"];
mysql_connect('localhost','MyUsername','MyPassword');
mysql_select_db('MyDatabase');
$query = "SELECT timestamp FROM MyTable WHERE id = '$id'";
$result = mysql_query($query);
$numrows = mysql_numrows($result);
if($numrows > 0){
$timestamp = mysql_result($result,0,"timestamp");
if($timestamp == $OldTimestamp){
setcookie("DataChanged", "N");
}else{
setcookie("DataChanged", "Y");
}
}
?>
<html>
<head>
<meta http-equiv='refresh' content='5'>
</head>
<body>
</body>
</html>
Load this page in an iframe in the page you want to refresh
<iframe src='check.php' width='0' height='0' frameborder='0'></iframe>
Now you need some javascript on the page that you want to refresh. This includes the shortest cookie reader I could find plus some code to check the cookie every 15 seconds and refresh the page if the cookie indicates that the data changed.
<script language='javascript'>
function get_cookie(name){
return(document.cookie.match('(^|; )'+name+'=([^;]*)')||0)[2]
}
function checkDatabase(){
if(get_cookie('DataChanged')=="Y"){
location.href='ThisPage.php';
}
}
setInterval(function(){checkDatabase()},15000);
</script>
You should create a div id for showing the bid amount. And use jQuery to update the amount via AJAX call as done below.
setTimeout('update_amount()', 1000);
function update_amount(){
var amt = $("#amount").html();
$.post('ajax_file.php?a='+amt, function(data){
if(data!=''){
$('#amount').html(data);
}
Here the current value displayed in the page is stored into amt. Then this value is passed to the php file via AJAX as post. You will have to do the procedures to check whether the amount has changed in the mySql table and if changed just echo the new amount in that php file. That amount will be updated in the amount div id in the current page.
Use jQuery and a timer ex.
setInterval(function(){
$.getJSON(
"myPath/myFile.php",
{
myData1:myDataVar1,
myData2:myDataVar2
},
function(response){
// Here the code
});
},1000);
(Time in milliseconds)
加载中,请稍侯......
精彩评论