在Django中重新加载表数据,而不刷新页面

在我的视图中获取数据的代码如下所示:

order=order.objects.filter(owner=request.user).order_by('-id')[:10]

我的模板中的代码如下所示,非常有效。现在,我想让这个表每10秒更新一次信息,而不刷新整个页面。视图的url为/且模板的名称为home

<table class=“table striped table condensed”>
<tr>
<th>注册编号&lt/th>
<th>并购;auml;rke&lt/th>
<th>Modell&lt/th>
&lt/tr>
{i的%s顺序为%}
{%如果i.order_预订%}
<tr class=“成功”>
{%else%}
<tr>
{%endif%}
<td>{i.regnr|upper}&lt/td>
<td>{i.brand | capfirst}&lt/td>
<td>{i.brand|u model|capfirst}&lt/td>
&lt/tr>
{%endfor%}
&lt/表>

url.py看起来像这样

urlpatterns=[url(r'^$',views.home,name='home')、url(r'^login/',auth'u views.login、{'template'name':'login.html'}、name='account'u 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.url]

你们谁能解释一下我会非常感激的

您可以使用setIntervaljQuery AJAX,以及视图

您的HTML

<table id=“\u appendHere”class=“table striped table condensed”>
<tr>
<th>注册编号&lt/th>
<th>并购;auml;rke&lt/th>
<th>Modell&lt/th>
&lt/tr>
{i的%s顺序为%}
{%如果i.order_预订%}
<tr class=“成功”>
{%else%}
<tr>
{%endif%}
<td>{i.regnr|upper}&lt/td>
<td>{i.brand | capfirst}&lt/td>
<td>{i.brand|u model|capfirst}&lt/td>
&lt/tr>
{%endfor%}
&lt/表>

JS

<脚本>
var append_增量=0;
setInterval(函数(){
$.ajax({
键入:“获取”,
url:{%url'获取更多表“%},//指向提供新信息的视图的url
数据:{'append\u increment':append\u increment}
})
.完成(功能(响应){
$('##u appendHere')。追加(响应);
附加_增量+=10;
});
}, 10000)
&lt/脚本>

查看

def获取更多表格(请求):
increment=int(request.GET['append\u increment'])
增量至=增量+10
order=order.objects.filter(owner=request.user).order_by('-id')[increment:increment_to]
返回render(请求'get_more_tables.html',{'order':order})

获取更多表格。html

{i顺序为%}
<tr>
{%如果i.order_预订%}
<tr class=“成功”>
{%else%}
<tr>
{%endif%}
<td>{i.regnr|upper}&lt/td>
<td>{i.brand | capfirst}&lt/td>
<td>{i.brand|u model|capfirst}&lt/td>
&lt/tr>
{%endfor%}

然后确保将新视图添加到您的url.py(确保它有name='get\u more\u tables',或者JS中的任何名称url:

这样做的目的是使用JS函数setInterval,每隔10000ms(10秒)向服务器中的视图发出GETAJAX请求。然后,视图使用这个新上下文呈现一个单独的HTML文件,并将其作为响应发送回原始HTML页面。然后通过jQuery将新的响应追加到表中。每次发生此循环时,切片都会递增,因此从Order中不会得到相同的结果

请记住,这将不间断地循环,因此如果希望结束,则必须向JS添加代码,以便在最后一个响应返回为空时停止setInterval

发表评论