Как передать динамически изменяющуюся переменную из python в HTML и заставить браузер заново отобразить новые данные без перезагрузки всей веб-страницы?

Я хотел бы добиться следующего:

  • передайте переменную из моего скрипта python на HTML-страницу
  • заставить браузер отобразить обновленную информацию
  • НЕ перерисовывайте и не перезагружайте всю HTML-страницу, так как это займет слишком много времени (новые данные будут передаваться от скрипта python к HTML-странице каждые 250 мс или около того.)
  • данные генерируются скриптом python в реальном времени, поэтому решение должно учитывать это
    • .

После целого дня исследований и просмотра многочисленных руководств, я понял, что Flask или Django могут быть использованы для достижения этой цели с помощью концепции, называемой "шаблонизацией". К сожалению, я полный новичок и запутался в деталях, не видя "общей картины" того, что нужно сделать... Поэтому я оказался здесь, надеясь, что кто-нибудь сможет прояснить мое понимание темы, не предполагая никаких предыдущих знаний...

Итак, у меня есть супер простой HTML файл, как показано ниже:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Test</title>
</head>
<body>
    <h1>Changing Number:</h1>
    <h1 id="number">0</h1>

и у меня также есть сценарий python:

import random
import time

for i in range(10):
    myvar = random.randint(1, 10)
    time.sleep(1)

Цель - передать myvar в html-элемент с id, "number" и заставить браузер отобразить новое значение без перезагрузки страницы.

Чтобы было понятно, я не ожидаю всеобъемлющего подробного руководства, поскольку знаю, что его создание займет слишком много времени (если вообще возможно...), но вместо этого я хотел бы получить "вид с высоты птичьего полета", или "общую картину" того, что мне нужно сделать.

Вот мое нынешнее понимание (которое, скорее всего, неверно):

  • Мне нужно иметь файл python, содержащий скрипт, который вычисляет значение для передачи. (Я использую VSCode в системе на базе windows для редактирования этот файл)

  • Я должен импортировать Flask в этот python-файл (если ничего лучшего не рекомендуется), так как это фреймворк, способный создать "связь" между скриптом python и HTML-страницей

    .

Итак: скрипт python вычисляет желаемое значение ---> передает значение в flask ---> flask передает значение в HTML-документ ---> браузер отображает документ

...но как повторяется процесс, когда новое значение вычисляется скриптом python?

Как указать браузеру, чтобы он повторно отображал только нужную часть веб-страницы?

Есть ли более простой способ или лучший фреймворк, который мог бы решить эту задачу?

Смотрю ли я в правильном направлении для решения проблемы или мне следует подойти к проблеме под другим углом?

Заранее большое спасибо!

Я не думаю, что это возможно без использования js. При запросе django рендерит html и отправляет его обратно в браузер, так что приходится перезагружать страницу.

Похоже, что вы обновляете переменную "myvar" каждые 1 секунду и хотите, чтобы эти изменения отражались на веб-странице.

Как сервер информирует клиента об этом изменении?

Модель HTTP основана на запросах и ответах. Клиент должен сделать HTTP-запрос к серверу, а сервер отвечает HTTP-ответом.

После первоначальной передачи (когда вы загружаете HTML-страницу, отрисованную веб-приложением Flask) вам придется делать новые HTTP-запросы, чтобы получить обновленный контент.

Вы можете сделать это, установив таймер и используя JavaScript. Вы можете сделать асинхронный запрос на веб-сервер для получения нового содержимого.

Вы можете добиться того же эффекта гораздо более простым способом, написав код на JavaScript и заставив JavaScript обновлять содержимое на стороне клиента без дополнительных запросов.

Поскольку задача проста (обновление переменной каждые 1 секунду), это хорошая задача для JavaScript. Задача, которую вы решаете на Python, может быть решена на JavaScript.

Для обзора приведем два решения, которые вы можете использовать:

  1. Устанавливайте таймер и выполняйте асинхронные запросы на JavaScript.
  2. Сделайте "myvar" переменной в JavaScript, а не в Python-скрипте.

Вот пример кода второго решения:

<!DOCTYPE html>
<html>

<head>
    <title>Simple Test</title>
</head>

<body>
    <h1>Changing Number:</h1>
    <h1 id="number"></h1>
</body>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", (event) => {
    var intervalID = window.setInterval(updateNumber, 1000);

    function randomInt(min, max) {
        return Math.floor(Math.random() * (max-min) + min);
    }

    function updateNumber() {
        document.getElementById("number").innerHTML = randomInt(1, 10);
    }
});
</script>
</html>

Вы можете открыть этот HTML-файл в веб-браузере и увидеть, что он обновляет переменную каждые 1 секунду. Это показывает, что задача хорошо подходит для простого JavaScript.

Вернуться на верх