Как я могу обновлять фотографию каждую секунду в моем шаблоне django? - PullRequest
Новая
       10

Как я могу обновлять фотографию каждую секунду в моем шаблоне django?

0 голосов
/ 16 января 2019

все. Я довольно новый с Джанго. В моем шаблоне django есть специальная позиция для отображения фотографии, и фотография должна обновляться каждую секунду. Как я могу это сделать? (Пути для новых фотографий взяты из базы данных. Я знаю, как получить их из БД.) Я знаю только, как вернуть HTML с помощью URL-запроса, но как я могу обновить определенный элемент в этом HTML без нового URL-запроса?

Дополнительная информация: фотографии, которые должны быть показаны, генерируются в режиме реального времени другим процессом, как и пути для фотографий.

На самом деле, я пока не реализую это. Я все еще изучаю джанго, но я могу смоделировать ситуацию с помощью простых кодов следующим образом:

urls.py: 

urlpatterns = [ url(r'^hello/$', hello_world),]

views.py: 

from django.shortcuts import render
from datetime import datetime

def hello_world(request):
    return render(request, 'hello_world.html', {
        'current_time': str(datetime.now()),
    })

hello_world.html: 

<!-- hello_world.html -->

<!DOCTYPE html>
<html>
    <head>
        <title>I come from template!!</title>
        <style>
            body {
               background-color: lightyellow;
            }
            em {
                color: LightSeaGreen;
            }
        </style>
    </head>
    <body>
<script>
    setInterval(function() {
        fetch("{% url 'hello_ajax' %}").then(function (response) {
    var current_time = response.json().current_time;
    console.log(current_time);
    document.getElementById("test").innerHTML = current_time;
        });
    }, 1000);
</script>
        <h1>Hello World!</h1>
    <em id="test"></em>
    </body>
</html>

Мы можем обновить current_time, обновив страницу, но как насчет обновления current_time каждую секунду без обновления страницы? Мы можем увидеть фотографию как current_time, чтобы смоделировать мой случай.

Обновление: Наконец-то работает: 

<script>
    setInterval(function() {
        fetch("{% url 'hello_ajax' %}").then(response => response.json())
.then(data => {
    // you can access your data here
    document.getElementById("test").innerHTML = data.current_time;
});
    }, 1000);
</script>

Мне интересно, почему он не работает с: 

<script>
        setInterval(function() {
            fetch("{% url 'hello_ajax' %}").then(response =>{
        // you can access your data here
        document.getElementById("test").innerHTML = response.json().current_time;
    });
        }, 1000);
</script>

он говорит, что "(index): 22 Uncaught (в обещании) TypeError: Не удалось выполнить 'json' для 'Response': поток тела заблокирован в fetch.then.data" Есть идеи?

1 Ответ

0 голосов
/ 16 января 2019

К сожалению, вы можете достичь этого только с помощью некоторого JavaScript и таких вещей, как setTimeout . Если это не будет большой список, вы можете отобразить его в массиве JavaScript, а затем использовать, например, setTimeout для переключения фото. Это не лучшая идея (я даже помню, как читал какую-то статью с некоторыми обоснованными соображениями, почему она плохая, постараюсь ее найти), но сработал бы. Итак, вы можете сделать что-то вроде этого в конце тела в шаблоне: 

<script>
    arrayOfUrls = [
        {% for url in urls}"{{ url }}",{% endfor %}
    ];
    function switchPhoto(urlArray, switchTo) {
        // if to go back to 0 if array finished
        document.getElementById("your-photo-id").src = urlArray[switchTo];
        setTimeout(switchPhoto, 1000, urlArray, switchTo + 1);
    }
    switchPhoto(arrayOfUrls, 0);
</script>

После обновления: если вы не хотите обновлять страницу, решение может быть следующим:

views.py

from django.http import JsonResponse
def hello_world(request):
    return render(request, 'hello_world.html', {
        'current_time': str(datetime.now()),
    })

def hellow_world_ajax(request):
    return JsonResponse({'current_time': str(datetime.now())})

Добавить url(r'^hello_ajax/$', hellow_world_ajax, name="hello_ajax"), к urls.py.

И в теле шаблона напишите JavaScript, используя, например, setInterval и либо ванильный JS fetch , либо некоторая библиотека / фреймворк js вставляют логику периодического обновления: 

<script>
    setInterval(function() {
        fetch("{% url 'hello_ajax' %}").then(function (response) {
            document.getElementById("your-photo-id").src = response.json().current_time;
        });
    }, 1000);
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...