时间戳

首页 > 解决方案 > 在 django 模板上定期更改 div 中的数据

javascript - 在 django 模板上定期更改 div 中的数据

问题描述

我想定期更改出现在我的页面上的评论（数据）。我在这里提到了一个问题，但数据没有改变，但它在页面刷新时确实如此。

这是我在views.py中的代码

def index(request):
    count = Article.objects.all().count()
    comments = Article.objects.values_list('content')[randint(0, count - 1)][0]
    context = {
        'current_date': datetime.now(),
        'title': 'Home',
        'comments': comments,
    }
    return render(request, 'index.html', context)

和urls.py

urlpatterns = [
    url(r'^$', index, name='index'),
    url(r'^about/$',about),
    # url(r'^comments/$',ArticleCreateView.as_view(), name='comments'),
    url(r'^admin/', admin.site.urls),
]

和index.html

<div>
    <div id="comments">
        {{ comments }}
    </div> 
</div>

<script>
    var ALARM_URL = "{% url 'index' %}";
    function refresh() {
        $.ajax({
            url: ALARM_URL,
            success: function(data) {
                $('#comments').html(data);
            }
        });
    };
    $(document).ready(function ($) {
        refresh();
        var int = setInterval("refresh()", 3000);
    });
  </script>

标签： javascripthtmlajaxdjango

解决方案

您的视图index()返回一个HTML页面，因此该参数data包含整个 HTML 页面。

您可能想要添加JSON仅返回数据的第二个视图，可能像这样：

视图.py

def index_data(request):
    # here you return whatever data you need updated in your template
    return JsonResponse({
        'something_1': 0,
    })

网址.py

url(r'^data$', index_data, name='index-data'),

然后在你的 AJAX 调用中你做这样的事情：

url: "{% url 'index-data' %}",
success: function(data) {
    $('#comments').html(data['something_1']);
}

让我们知道这是否有帮助。

编辑

您可能还需要调整计时器；将函数名传递给它，但不调用它，也不是作为字符串（参见文档setInterval）：

$(document).ready(function ($) {
    refresh();
    setInterval(refresh, 3000);
});

推荐阅读