如何在不重新加载页面的情况下刷新 div 和 mysql 代码

Posted 2023-02-24

【中文标题】如何在不重新加载页面的情况下刷新 div 和 mysql 代码

【英文标题】：how to refresh div and mysql code without reloading the page

【发布时间】：2016-11-08 01:16:53

【问题描述】：

嘿，我对此有点陌生，但我目前正在编写一个小游戏，并且我有一个使用 jquery、css 和 php 的健康栏。我使用 mysql 查询从数据库中获取健康值，它可以工作，但仅在我重新加载页面时才有效。我希望健康条的值在我希望的每 x 秒内不断更新。

< script >
  function UpdateStats() 
    $.getJSON('demo1.php', function(stats) 
      $('#pbar_innerdiv').animate(
        width: (stats.health) + '%'
      , 200);
    );

  , 1000; < /script>

#pbar_outerdiv 
  margin-top: 5px;
  margin-left: 90px;

#pbar_innertext 
  margin-top: 6px;
  margin-left: 7px;

<div id="pbar_outerdiv" style="width: 580px; height: 32px; border: 1px solid white; z-index: 1; position: relative; border-radius: 2px; -moz-border-radius: 5px;">
  <div id="pbar_innerdiv" style="background-color: maroon; z-index: 2; height: 100%; width: <?php echo $health;?>%;"></div>
  <div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white; font-weight: bold; text-align: center;">
    <?php echo $health;?>/100</div>
</div>

【问题讨论】：

这是 php 的样子

你的 setTimeout JS 函数在哪里？ ", 1000;"在这里没有意义。

【参考方案1】：

像这样改变你的脚本

    < script >
      function UpdateStats() 
        $.getJSON('demo1.php', function(stats) 
          $('#pbar_innerdiv').animate(
            width: (stats.health) + '%'
          , 200);
        );

         setTimeout(function()UpdateStats(), 3000);
      

  UpdateStats();    

      < /script>

这个比 setinterval 更好，它会在第一个迭代完成时调用第二个迭代。希望对你有帮助

explanation: 首先它会在 UpdateStats() 完成后调用 UpdateStats() 函数，然后等待 3 秒然后调用第二次迭代。这个会重复做