为什么我的jquery刷新会在div中创建单独的写操作？

问题描述

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

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

我经历了很多论坛和解决方案，但似乎无法获得任何编码示例。

[编辑：代码现在大部分都可以使用！！但是，它不是简单地刷新div，而是在表上方创建了一个完全独立的写出内容，因此，我看到了原始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>

解决方法

通过http的https intead加载jQuery（不是问题，但仍然如此）
不要链接到w3schools样式表（不是问题，但还是如此）
您的HTML无效。您可能希望自己的统计信息成为精巧而不是无效的DIV
缓存无效化器：

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

表建议：

<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>

html javascript refresh

为什么我的jquery刷新会在div中创建单独的写操作？

问题描述

解决方法

相关问答