Question

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

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

我的模板中的代码看起来像这样，效果很好。现在，问题是我希望这个表每10秒更新一次信息而不刷新整个页面。视图的URL是/，模板的名称是home。

           <table class="table table-striped table-condensed">
              <tr>
                <th>Reg.nr.</th>
                <th>M&auml;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), ]

你们中的任何人都可以对此有所了解我会非常感激！

Answer 1

您可以使用setInterval，jQuery AJAX和view：

您的HTML

   <table id="_appendHere" class="table table-striped table-condensed">
      <tr>
        <th>Reg.nr.</th>
        <th>M&auml;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 %}

然后只需确保将新视图添加到您的urls.py 中（确保它有name='get_more_tables'，或者JS url:中的名称）

这样做是使用setInterval（JS函数）每10000毫秒（10秒）向服务器中的视图发出GET个AJAX请求。然后，视图使用此新上下文呈现单独的HTML文件，并将其作为response发送回原始HTML页面。然后新的response通过jQuery appended到你的桌子。每次发生此循环时，切片都会递增，因此您不会从Order获得相同的结果。

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

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

1 个答案: