网站上一节（里）的刷新功能答案

【问题标题】：Refresh function for one section (li) on Website网站上一节（里）的刷新功能
【发布时间】：2020-12-02 23:25:51
【问题描述】：

我只想为我网站上的一个部分启用刷新。只喜欢一个表格单元格或一个<li> 元素。有可能吗？

<div id="loading">
  <h1 class="name"> Loading... </h1>
  <ul class="status">
    <li>Status: </li>
    <li>loading state</li>
  </ul>
</div>

我需要刷新“加载状态”。这是我从我的 plc 获得的值。我想每 3 秒刷新一次此部分。

我试图用 JavaScript 来做，但没有成功。

感谢您的回答。

【问题讨论】：

如何从plc获取数据？
你的照片发生了什么变化以及如何变化？
@mplungjan siemens plc 具有网络服务器功能。正在运行的 html 站点抛出了这个网络服务器。在那里您可以读取和写入 plc 的不同统计信息

标签： javascript html web refresh

【解决方案1】：

您可以使用setInterval 并在回调函数内部进行必要的更改以更新该部分的 dom 内容。

如果您想定期刷新，请使用setInterval，如果您只需要刷新一次，请使用setTimeout

setInterval(() => {

  document.getElementById('test').innerHTML = Math.ceil(Math.random() * 200)
}, 5000)

<div id="loading">
  <h1 class="name" id='test'> Loading... </h1>
  <ul class="status">
    <li>Status: </li>
    <li>loading state</li>
  </ul>
</div>

【讨论】：

如何访问plc？
@mplungjan 这是我从我的 plc 获得的值。。似乎 SO 用户已经能够访问它
除非整个页面来自plc，在这种情况下OP需要ajax或代理ajax来只更新页面的一部分
@brk 你的代码似乎是我正在寻找的，但我没有得到我必须放置变量的地方。现在你刚刚添加了一个随机数，以表明它改变了（我猜）我从我的 plc 获得的变量是：“加载状态”。那是我要刷新的那个。它应该如下所示：状态：状态 1“3 秒刷新”状态 2

【解决方案2】：

试试XMLHttpRequest

let xhr = new XMLHttpRequest();

setInterval(() => {

  xhr.open("POST", "./Add_address_of_content/", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState != 4 || xhr.status != 200) return;
    document.getElementById('loadingDivId')=req.responseText;
  };

}, 3000);

<div id="loading">
  <h1 class="name" id='test'> Loading... </h1>
  <ul class="status">
    <li>Status: </li>
    <li id="loadingDivId">loading state</li>
  </ul>
</div>

【讨论】：