Question

我正在使用来自Wi-Fi模块的POST请求向我的模型添加对象。它存储来自不同传感器的数据。每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）:(我想自动刷新id =“test”的div）

<!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>

当我运行上面的代码时，“test”div在第一个之后消失自动刷新。

我也试过这些：

只发布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请求，“test”div在几分之一秒内消失。

我最接近的是：

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

        }

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

在此，我每10秒钟收到一次“GET”请求。和“测试”div也不会消失。但是，即使模型对象中的值是改变了，这里的价值保持不变。

刷新django中的<div>但自动刷新整个模板

0 个答案: