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

Question

我想定期更改出现在我页面上的评论(数据)。我在这里提到了一个问题，但数据没有改变，它在页面刷新时发生了变化。

这是我在 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>

Answer 1

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

您可能想添加第二个仅返回 JSON 数据的 View ，可能像这样:

views.py

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

urls.py

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

然后在您的 AJAX 调用中执行如下操作:

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

如果有帮助，请告诉我们。

---

编辑

您可能还需要调整计时器；将函数名称传递给它，但不调用它，也不作为字符串传递(请参阅 the docs of setInterval):

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