javascript - 尝试使用 mysql 和 php 更新 jquery 变量

Question

我正在尝试使用 jquery、php 和 mysql 制作一个慈善计数器。 我试图每 5 秒使用 php 从 mysql 获取新值，而不使用“window.setInterval()”更新页面，但我的问题是它没有获取新值，而是继续使用开始时获取的值。这是代码，我希望有人能够提供帮助:)。

window.setInterval(function(){
    var needed = <?php echo neededGetFirst(); ?>;
    var got = <?php echo gotGetFirst(); ?>;
    console.log('needed: ' + needed);
    console.log('got: ' + got);
    var gaugeHeight = 223;
    var gaugeBottom = 318;
    var percent = (100 / needed) * got;
    var heightOffset = (gaugeHeight / 100) * percent;
    var bottomOffset = gaugeBottom - (gaugeHeight - heightOffset);

    $('#gauge').animate({
         height: heightOffset + 'px',
         bottom: bottomOffset + 'px'
    }, 1000);

    for (var i = 2, limit = 7; i < limit; i++) {
         var value = (needed / 5) * (i - 1);
         $('#stamp' + i).text(value);
    };
}, 5000);

编辑

是否可以从具有某种GET/RUN类型的文件中返回值？通过将 php/mysql 数据库函数放入文件中并使用 return 作为值。

编辑2

文件中使用的php代码:

<?php
  $pdo = new PDO('mysql:host=127.0.0.1;dbname=thermometer', 'root', ''); 
  $sql = 'SELECT `got`.`value` AS got, `needed`.`value` AS needed FROM `needed`, `got`'; 
  $statement = $pdo->prepare($sql);
  $statement->execute();
  $result = $statement->fetchAll(PDO::FETCH_ASSOC);
  $json = json_encode($result );
  echo($json);
?>

Answer 1

正如已经提到的，要每隔几秒用新值更新页面，您将需要与服务器进行某种交互，可能是通过 AJAX。

以下是如何执行此操作的示例:

function getNewValues(){
  return $.ajax({
    url: 'submit.php',
    type: 'POST',
    dataType: 'json',
    cache: false
  });
}

window.setInterval(function(){
  getNewValues()
  .success(function(data) {
    var needed = data["needed"],
        got = data["got"];

    var gaugeHeight = 223;
    var gaugeBottom = 318;
    var percent = (100 / needed) * got;
    var heightOffset = (gaugeHeight / 100) * percent;
    var bottomOffset = gaugeBottom - (gaugeHeight - heightOffset);

    $('#gauge').animate({
      height: heightOffset + 'px',
      bottom: bottomOffset + 'px'
    }, 1000);

    for (var i = 2, limit = 7; i < limit; i++) {
      var value = (needed / 5) * (i - 1);
      $('#stamp' + i).text(value);
    };
  })
  .fail(function() {
    console.log("An error ocurred");
  });
}, 500);

现在，每五秒就会向服务器发出一个请求并检索最新值。

您必须调整 PHP 脚本以返回一些简单的 JSON:

{
    "needed": needed_value,
    "got": got_value
}

也许是这样的:

<?php
  $pdo = new PDO('mysql:host=host;dbname=db_name', 'user', 'pass'); 
  $sql = 'SELECT needed, got FROM table'; 
  $statement = $pdo->prepare($sql);
  $statement->execute();
  $result = $statement->fetch();
  $json = json_encode($result );
  echo($json);
?>

尽管这尚未经过测试，但它应该有望为您指明正确的道路。