Question

我只想每5到10秒从页面中重新加载DIV，因为那是数据输入的时间，我不想重新加载FULL页面，而只是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');

值得注意的是，整个页面已处理并返回，这使得效率相当低下。对于将要反复执行的操作，您可能希望使其更加高效，而仅请求/返回更新的数据。

下一步，请考虑制作一个单独的页面，该页面返回 just 生成标记所需的数据，理想情况下以JSON格式返回。然后，使用jQuery的$.get()发出AJAX请求以仅获取该数据，并在回调中包含JavaScript代码，该代码使用该数据来修改已存在的页面标记。

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

从页面重新加载DIV，无需更改页面

1 个答案: