Функция обновления для одного раздела (li) на веб-сайте

#javascript #html #web #refresh

#javascript #HTML #веб #обновить

Вопрос:

Я хотел бы включить обновление только для одного раздела на моем веб-сайте. Например, только для одной ячейки таблицы или для одного <li> элемента. Возможно ли это?

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

Мне нужно обновить «состояние загрузки». Это значение, которое я получаю от своего ПЛК. Я хотел бы обновлять этот раздел каждые 3 секунды.

Я пытался сделать это с помощью JavaScript, но у меня не получилось.

Спасибо за ваши ответы.

1. Как вы получаете данные от ПЛК?

2. Что меняет ваш рисунок и как?

3. @mplungjan siemens plc имеет функцию веб-сервера. Запущенный html-сайт выбросил этот веб-сервер. Там вы можете читать и записывать различную статистику plc

Ответ №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>

1. Как это обеспечивает доступ к ПЛК?

2. @mplungjan Это значение, которое я получаю от своего plc. . Похоже, пользователь уже может получить к нему доступ

3. Если только полная страница не поступает из plc, в этом случае OP необходимо использовать ajax или прокси-сервер ajax, чтобы обновить только часть страницы

4. @brk похоже, что ваш код — это то, что я ищу, но я не понимаю, куда мне нужно поместить свою переменную. Прямо сейчас вы просто добавили случайное число, чтобы показать, что оно меняется (я думаю) Моя переменная, которую я получаю от своего ПЛК, это: «состояние загрузки». Это тот, который я хочу обновить. Это должно выглядеть так: Статус: Состояние 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>