Обновление <div>в django, но автоматическое обновление всего шаблона - PullRequest
Новая
       6

Обновление <div>в django, но автоматическое обновление всего шаблона

0 голосов
/ 13 мая 2018

Я добавляю объекты в свою модель, используя запрос POST от модуля Wi-Fi.Он хранит данные от разных датчиков.Данные отправляются периодически через каждые 5 секунд.Чтобы отобразить эти данные, я создал страницу.Я не хочу, чтобы вся страница обновлялась, потому что разные div получают данные в разное время.Чего я хочу добиться, так это периодически обновлять некоторые div, скажем, 10 секунд, и получать обновленные данные.

Я создал тестовый шаблон для проверки части автообновления.Пока что я достиг этого:

urls.py: 

urlpatterns = [
  url(r'^test/', views.test, name='test'),
]

views.py: 

def test(request):
    acc_list = AccModel.objects.order_by('-updated')[:10]
    gps_list = GpsModel.objects.order_by('-updated')[:1]
    obj_dict = {'accVal': acc_list, 'gpsVal': gps_list}
    return render(request, 'appTwo/test.html', context=obj_dict)

файл шаблона (test.html) :( Iхочу автоматически обновить только div с id = "test") 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function refresh() {
            $.ajax({
                url: '{% url 'test' %}',
                success: function (data) {
                    $('#test').replaceWith($('#test', data));
                }
            });

        }

        $(function () {
            setInterval('refresh()', 10000);
        });
    </script>
</head>
<body>
{% if accVal %}
    <h1>{{ accVal }}</h1>
{% endif %}
{% if gpsVal %}
    <div id="test">
        <h1>{{ gpsVal.0.latValue }}</h1>
    </div>
{% endif %}

<div>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap">
    </script>

</div>

<script type="text/javascript">
    gmaps js..
</script>
</body>
</html>

Когда я запускаю приведенный выше код, div "test" исчезает после первого автоматического обновления.

Я также попробовал это:

просто отправив часть js: 

<script type="text/javascript">
        function refresh() {
    $.ajax({
        url: "{% url 'test' %}",
        success: function(data) {
            $('#test').replaceWith($('#test',data)); // NOTE this
        }
    });
}
var seconds = 3; // seconds, edit here
setInterval(refresh(),seconds * 1000);
    </script>

Я получил два запроса GET, и div "test" исчезает за долюсекунда.

Самое близкое, что я получил: 

<script type="text/javascript">
        function refresh() {
            $.ajax({
                url: '{% url 'test' %}',
                success: function (data) {
                    $('#test').replaceWith($('#test'), data);
                }
            });

        }

        $(function () {
            setInterval('refresh()', 10000);
        });
    </script>

В этом я получаю запрос "GET" каждые 10 секунд.и "тест" div также не исчезает.Но даже если значение в модельном объекте изменяется, значение здесь остается тем же.

1 Ответ

0 голосов
/ 13 мая 2018

setInterval() выполнит трюк, обновляя страницу непрерывно через определенное время.Чтобы заменить целевой div, используйте replaceWith()

function refresh() {
    $.ajax({
        url: "{% url 'test' %}",
        success: function(data) {
            $('#test').replaceWith($('#test',data)); // NOTE this
        }
    });
}
var seconds = 3; // seconds, edit here
setInterval(refresh(),seconds * 1000);
...