javascript - 从页面重新加载 DIV，而不更改页面

Question

我只想每 5 到 10 秒从我的页面重新加载 DIV，因为这是数据输入的时间，我不想重新加载完整页面，只重新加载 DIV。

这是我尝试过的，但由于某种原因它弄乱了我所有的页面格式:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
      <script type="text/javascript">
      var auto_refresh = setInterval(
      function () {
          $('#blocoCorrente').load('#blocoCorrente');
      }, 1000);
      </script>
      </p>

这是我的 DIV 的一部分:

 <div class="blocoCorrente" id = "blocoCorrente">
      <!-- Imprimir os valore dos sensor 1 -->
      <p class="p0-blocoCorrente">Corrente 1:
      <?php 
        $id = $_SESSION['userId']; 

        $dBname = "infosensor";
        $conn = mysqli_connect($servername, $dBUsername, $dBPassword, $dBname);

        $sql = "SELECT * FROM `$id` ORDER BY id DESC LIMIT 1;";
        $result = mysqli_query($conn, $sql);
        $resultCheck = mysqli_num_rows($result);

        if($resultCheck > 0)
        {
          while ($row = mysqli_fetch_assoc($result))
          {
            //echo "".$row['sensor1']."A";
            $ss1 = intval($row['sensor1'] * ($p = pow(10, 2))) / $p;
            echo "".$ss1."A";
            $s1 = $row['sensor1'];
          }
        }
      ?>
      </p>

Answer 1

.load() needs a URL发出 AJAX 请求来获取数据。附加选择器是可选的，用于从响应中过滤掉信息。像这样的事情:

$('#blocoCorrente').load('yourPage.php #blocoCorrente');

您的测试可以证实这一点，但我怀疑可能需要进一步采取措施。我怀疑这会将新的 #blocoCorrente 元素放置为现有 #blocoCorrente 元素的子，从而创建一个不断增长的层次结构ID 重复。

如果情况确实如此，作为一种快速解决方案，您可以简单地包装 #blocoCorrente 元素并使用该包装元素作为目标。像这样的事情:

<div id="blocoCorrente-container">
    <div id="blocoCorrente">
        ...
    </div>
</div>

然后在你的 JavaScript 中:

$('#blocoCorrente-container').load('yourPage.php #blocoCorrente');

<小时/>

值得注意的是，整个页面都会被处理并返回，这使得效率相当低。对于像这样重复执行的操作，您可能希望提高其效率并且仅请求/返回更新的数据。

下一步，考虑创建一个单独的页面，仅返回构建标记所需的数据，最好是 JSON 格式。然后使用 jQuery 的 $.get() 发出 AJAX 请求以获取该数据，并在回调中使用 JavaScript 代码，该代码使用该数据修改现有的页面标记。

改进设计和效率的进一步步骤可能是研究一种名为 WebSockets 的技术的使用，其中服务器仅在数据更新时主动将更新的信息推送到浏览器。这将大大减少发出的 HTTP 请求的数量。