在我的 View 中获取数据的代码如下所示:
order = Order.objects.filter(owner=request.user).order_by('-id')[:10]
我的模板中的代码如下所示并且运行良好。现在,问题是我希望该表每 10 秒更新一次信息,而不刷新整个页面。 View 的 url 是/,模板的名称是 home。
<table class="table table-striped table-condensed">
<tr>
<th>Reg.nr.</th>
<th>Märke</th>
<th>Modell</th>
</tr>
{% for i in order %}
{% if i.order_booked %}
<tr class="success">
{% else %}
<tr>
{% endif %}
<td>{{ i.regnr|upper }}</td>
<td>{{ i.brand|capfirst }}</td>
<td>{{ i.brand_model|capfirst }}</td>
</tr>
{% endfor %}
</table>
urls.py 看起来像这样
urlpatterns = [ url(r'^$',views.home, name='home'), url(r'^login/', auth_views.login, {'template_name':'login.html'}, name='account_login'), url(r'^logout/', auth_views.logout, {'template_name':'logout.html'},name='account_logout'), url(r'^add_order/', views.add_order, name='add_order'), url(r'^admin/', admin.site.urls), ]
你们中的任何人都可以对此有所了解吗,我将不胜感激!
最佳答案
您可以使用 setInterval
、jQuery AJAX
和 view
:
您的 HTML
<table id="_appendHere" class="table table-striped table-condensed">
<tr>
<th>Reg.nr.</th>
<th>Märke</th>
<th>Modell</th>
</tr>
{% for i in order %}
{% if i.order_booked %}
<tr class="success">
{% else %}
<tr>
{% endif %}
<td>{{ i.regnr|upper }}</td>
<td>{{ i.brand|capfirst }}</td>
<td>{{ i.brand_model|capfirst }}</td>
</tr>
{% endfor %}
</table>
JS
<script>
var append_increment = 0;
setInterval(function() {
$.ajax({
type: "GET",
url: {% url 'get_more_tables' %}, // URL to your view that serves new info
data: {'append_increment': append_increment}
})
.done(function(response) {
$('#_appendHere').append(response);
append_increment += 10;
});
}, 10000)
</script>
查看
def get_more_tables(request):
increment = int(request.GET['append_increment'])
increment_to = increment + 10
order = Order.objects.filter(owner=request.user).order_by('-id')[increment:increment_to]
return render(request, 'get_more_tables.html', {'order': order})
get_more_tables.html
{% for i in order %}
<tr>
{% if i.order_booked %}
<tr class="success">
{% else %}
<tr>
{% endif %}
<td>{{ i.regnr|upper }}</td>
<td>{{ i.brand|capfirst }}</td>
<td>{{ i.brand_model|capfirst }}</td>
</tr>
{% endfor %}
然后确保将新 View 添加到您的 urls.py
(确保它具有 name='get_more_tables'
或任何名称在你的 JS url:
)
它的作用是使用 setInterval
(一个 JS 函数)每 10000 毫秒(10 秒)向服务器中的 View 发出一个 GET
AJAX 请求。然后,该 View 使用此新上下文呈现一个单独的 HTML 文件,并将其作为响应
发送回原始 HTML 页面。然后,新的响应
通过 jQuery 附加
到您的表中。每次发生此循环时,切片都会递增,因此您不会从 Order
获得相同的结果。
请记住,这将不停地循环,因此如果您希望它结束,则必须向 JS 添加代码,以便在最后一个响应返回空时停止 setInterval
。
关于jquery - 在Django中重新加载表数据而不刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34774138/