php - javascript倒计时更新数据库并刷新

Question

有人可以帮我处理 js/ajax 倒计时我想要一个倒计时计时器到 10 秒，然后更新数据库并在页面达到 0 时刷新页面。

我不太擅长 javascript/ajax，这是我目前得到的：

var ss = 10;
function countdown() {
ss = ss-1;
if (ss<0) {
var url='update.php?countdown='+countdown;
}
else {
document.getElementById("countdown").innerHTML=ss;
window.setTimeout("countdown()", 1000);
}
}

<span id="countdown" style="color:green;">10</span>

和 update.php 文件，女巫工作正常：

if (isset($_REQUEST['countdown'])) {     
  mysql_query("INSERT INTO num (id, ad, active) 
  VALUES ('1', 'Test',1)") or die(mysql_error());
  }

这也是我发现的http://pastebin.com/Qwz3Zqtt，工作正常，但我不知道如何将它们放在一起。

任何帮助将不胜感激。

谢谢

Answer 1

使用jQuery ajax

最简单的例子：

if (ss<0) {
    $.ajax('update.php?countdown='+countdown);
}

Answer 2

您将要学习基本的 ajax 来处理数据库请求。jQuery有一个非常易于使用的实现。

基本代码可能是这样的：

<script>
function updateTimer(seconds){
    var countdown = document.getElementById('countdown');
    countdown.innerHTML = "Please wait " + seconds + " seconds.";
}

var timer = function() {
    var seconds = 10;
    var interval = setInterval(function(){
        if (seconds <= 0){
            countdown.innerHTML = "Finished.. Updating Database";
            // AJAX request here
            clearInterval(interval);
        }else{
            updateTimer(seconds);            
            --seconds;
        }
    }, 1000);
    updateTimer(seconds);    
    --seconds;
}

document.getElementById('start').addEventListener('click', timer);
</script>

<div id="countdown"></div>
<button id="start">Click Me</button>

这是一个小提琴