Django: Обновление значения в html-странице без обновления страницы

У меня есть Rest API, который я получаю данные каждые 10 секунд. Я получаю данные с информацией о времени, когда данные были отправлены. Таким образом, пользователь должен видеть на странице самые свежие данные.

Этот код будет работать, но он также не будет обновлять данные без обновления:

def get_datas(request):
   data = //find the soonest data
   return render(request, 'page.html', {'data': data})

Какое лучшее решение для этого?

Вы можете использовать Ajax, с, в вашем views.py, чем-то вроде

def get_data(request):
    data = the_soonest_data
    return JsonResponse(data) // Your data have to be JSON serializable

Затем в вашем page.html вы можете использовать Ajax для вызова представления get_data каждые 10 секунд или любое другое время, которое вы захотите :

<script>
$(document).ready(function() {
                updateState()
    
              function updateState() {
                $.ajax({
                  url: "{% url 'your_app:get_data' %}", // if you have dynamic url
                  url: "get_data/" // if you don't have dynamic url
                  type: 'GET'
                })
                .done(response => {
                  const data = response


                  // do whatever you want with your data
                  

                  // rerun every 10 seconds
                  setTimeout(function() {
                    updateState()
                  }, 10000)
                })
              }
            })
</script>

Не забудьте скачать jQuery, или иметь этот скрипт в вашем html файле :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

После загрузки страницы она будет получать jsonResponse представления get_data каждые x секунд, которые вы задали в части timeout. Если вы хотите остановиться в определенный момент, просто вернитесь перед вызовом функции updateState.

Конечно, для работы этого кода необходимо загрузить ваш шаблон, поэтому у вас должно быть представление, которое отображает вашу 'page.html'.

Надеюсь, это поможет ;)

Вы спрашиваете, как лучше реализовать AJAX, хотя я бы сказал, что не существует "лучшей" реализации AJAX. Наиболее подходящее решение всегда будет зависеть от обстоятельств вашего проекта. jQuery - одно из старых, но все еще эффективных решений.

Однако есть более современный вариант, который я бы рекомендовал вам попробовать, потому что он особенно подходит для Django: HTMX. С HTMX, для вашего простого случая использования периодически обновляемой части страницы, вам не нужно писать JavaScript. Все, что вам нужно, это простая HTML-страница, которая содержит следующее:

<!-- Load the HTMX JS: -->
<script src="htmx.min.js" defer></script>
<!-- The magic happens here in one line: -->
<div hx-get="/data" hx-trigger="every 10s"></div>

Эту страницу можно обслуживать через простой TemplateView. И тогда ваш get_datas() вид может остаться прежним, за исключением того, что page.html шаблон не должен содержать полную HTML-страницу. Это должен быть просто фрагмент страницы (скажем, последовательность divs), который преобразует ваши данные в HTML. Приведенный выше фрагмент предполагает, что get_datas() обслуживается через URL /data.

После того, как пользователь загрузит главную HTML-страницу, она начнет вызывать /data каждые 10 секунд, и ответ от этого URL будет вставлен в div с атрибутом hx-get.

(Вы упомянули, что ваше представление get_datas() принадлежит "Rest API", и хотя большинство "Rest API" в наши дни в основном возвращают данные в формате JSON, REST технически не ограничивается JSON. HTML также вполне допустим, как и то, что сейчас возвращает ваше представление get_datas(), учитывая, что оно использует шаблон 'page.html'. Это одна из причин, почему HTMX удобен для Django; вам не нужно возиться с JSON для многих случаев использования, и это экономит вам много работы.)

Вы можете ознакомиться с документацией по HTMX здесь: https://htmx.org/docs/. В частности, смотрите раздел polling.

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