在 django 中刷新 <div> 但自动刷新整个模板答案

【问题标题】：Refreshing <div> in django but auto refreshing the whole template在 django 中刷新 <div> 但自动刷新整个模板
【发布时间】：2018-10-23 06:26:53
【问题描述】：

我正在使用来自 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也不会消失。但是，即使模型对象中的值是改变了，这里的值保持不变。

【问题讨论】：

通过使用$(...)，您实际上会在文档加载后立即刷新。应该在外面调用setTimeout(refresh, 10000) 给它一定的延迟。
@WillemVanOnsem 我的错！谢谢指正！现在明白了:)
我可能是错的，但不是网址的问题吗？我的意思是 ajax 正在调用呈现我完整视图的 url。如果是这样，如何获取 id='test' 的特定 div 的 url？

标签： javascript jquery ajax django refresh

【解决方案1】：

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);

【讨论】：