为什么我的 jquery 刷新会从我的 div 中创建一个单独的写入？

Question

我正在尝试使用 jquery 每两秒刷新一次 'stats' div 的内容。在 div 中，它首先写出 stats.php 的内容（其中包含来自数据库的值）。我希望 div 每两秒重新加载该页面，以显示数据库 table.

的实时值

原始代码全部有效。 Stats.php 完美地写出了我想要的方式，但是如果我更改数据库中的统计信息并等待几秒钟，它永远不会在网站上更新以反映这些更改，除非我手动刷新页面（我'我试图避免）。

我浏览了很多论坛和解决方案，但似乎无法使任何编码示例正常工作。

[编辑：代码现在基本可以工作了！！但是，它不是简单地刷新 div，而是在我的 table 之上创建了一个完全独立的写出，所以我看到了原始 div，然后是第二个 div。更新了下面的代码和图片]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Lands Between</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link rel="stylesheet" href="css/css2.css">
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(function() {
              setInterval(function() {
                $('#stats').load('php/stats.php');
              }, 2000);
            });
        </script>
    </head>
    <body>
        <nav class="navtop">
            <div class="header">
                <h1 style="color: white; font-family: 'Blackadder ITC', 'Playbill', 'Poor Richard'; text-shadow: 1px 1px #403d39;">
                    Lands Between
                </h1>
            </div>
        </nav>
        
        <div class="content">
            <table align="center" class="main-table" style="padding-right: 5px">
                <tr>
                    <td rowspan="4">
                        <div id="chad">
                            <a href="php/charstats.php" target="screen">
                                <img src="graphics/Chad100pxHeadon.png"></div>
                            </a>
                    </td>
                    <td align="right" colspan="2" style="padding-right: 10px">
                        <strong>Chad - Level <?php echo $lvl; ?></strong> | 
                        <a href="logout.php">Logout</a>
                    </td>
                </tr>
                
                <div id="stats">
                    <?php include 'php/stats.php'; ?>
                </div>
                
                <tr>
                    <td colspan="2">
                        <iframe name="screen" src="locations/<?php echo $location; ?>.php" scrolling="no"></iframe>
                    </td>
                </tr>
            </table>
            
            <?php include 'php/actionbuttons.php'; ?>
        </div>
    </body>
</html>

这是我的 stats.php 页面：

<?php
include_once 'connect.php';
include_once 'functGeneral.php';
    
    //user's specific id is stored in the cookie
    $id = $_COOKIE["user"];
    
    //pull users character stats from database using id
    $query = "SELECT * FROM stats WHERE id='$id'";
    $result = $conn->query($query);
    $charInfo = $result->fetch_array(MYSQLI_ASSOC);
    
    //store the stats to variables
    $hp = $charInfo['hp'];  $hpmax = $charInfo['hpmax'];
    $mp = $charInfo['mp'];  $mpmax = $charInfo['mpmax'];
    $xp = $charInfo['xp'];  $lvl = $charInfo['lvl'];
    $str = $charInfo['str'];  $spd = $charInfo['spd'];
    $armor = $charInfo['armor'];    $weapon = $charInfo['weapon'];
    
    //get percentages for stat bar widths
    //variables are used at bottom in javascript code
    $hpbar = ($hp / $hpmax) * 100;
    $mpbar = ($mp / $mpmax) * 100;
    $xpmax = getmaxXP($lvl);
    $xpbar = ($xp / $xpmax) * 100;
    
?>

<tr>
    <td>
        <div class="w3-light-grey w3-round-xlarge">
            <div id="hp" class="w3-container w3-round-xlarge w3-red" style="max-height: 30px; height: 30px; width: 100%; text-shadow: 1px 1px #403d39;">
                <span style="position: absolute;">HP: <?php echo $hp; ?>/<?php echo $hpmax; ?></span>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="w3-light-grey w3-round-xlarge">
            <div id="mp" class="w3-container w3-round-xlarge w3-blue" style="max-height: 30px; height: 30px; width: 100%; text-shadow: 1px 1px #403d39;">
                <span style="position: absolute;">MP: <?php echo $mp; ?>/<?php echo $mpmax; ?></span>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="w3-light-grey w3-round-xlarge">
            <div id="xp" class="w3-container w3-round-xlarge w3-yellow" style="max-height: 30px; height: 30px; width: 100%; text-shadow: 1px 1px #403d39;">
                <span style="position: absolute;"><font color="white">XP: <?php echo $xp; ?>/<?php echo $xpmax; ?></font></span>
            </div>
        </div>
    </td>
</tr>


<script type="text/javascript">

    var hpwidth = <?php echo $hpbar ?>;
    var mpwidth = <?php echo $mpbar ?>;
    var xpwidth = <?php echo $xpbar ?>;
    
    document.getElementById("hp").style.width = hpwidth + "%";
    document.getElementById("mp").style.width = mpwidth + "%";
    document.getElementById("xp").style.width = xpwidth + "%";

</script>

Answer 1

通过 https 而非 http 加载 jQuery（不是问题，但仍然如此）
不要link w3schools 样式表（不是问题但仍然如此）
您的HTML无效。您可能希望您的统计数据成为 tbody 而不是无效的 DIV
缓存破坏者：

$(function() {
  setInterval(function() {
    $('#stats').load('php/stats.php?rnd=' + new Date().getTime());
  }, 2000);
});

Table 建议：

<table align="center" class="main-table" style="padding-right: 5px">
  <tbody>
    <tr>
      <td rowspan="4" id="chad">
        <a href="php/charstats.php" target="screen">
          <img src="graphics/Chad100pxHeadon.png">
        </a>
      </td>
      <td align="right" colspan="2" style="padding-right: 10px">
        <strong>Chad - Level <?php echo $lvl; ?></strong> |
        <a href="logout.php">Logout</a>
      </td>
    </tr>
  </tbody>
  <tbody id="stats">
    <?php include 'php/stats.php'; ?>
  </tbody>
  <tbody>
    <tr>
      <td colspan="2">
        <iframe name="screen" src="locations/<?php echo $location; ?>.php" scrolling="no"></iframe>
      </td>
    </tr>
  </tbody>
</table>

为什么我的 jquery 刷新会从我的 div 中创建一个单独的写入？

Why is my jquery refresh creating a separate write out of my div?

html

javascript

jquery

refresh