javascript - 重新加载表格而不刷新 Django 中的页面

Question

有一个小表，需要每 10 秒更新一次新数据。整个网站都在 Django 中运行。 JSON 将数据解析为 1 个表，并在数据库中每 10 秒重写一次数据。该网站正在显示数据库中的数据。我需要的程序是每 10 秒用新数据刷新一次前端表——我想这就是 AJAX，你能帮我写代码吗？它不会将数据附加到表中，只是不断刷新它。

示例 - 数据库中的表有固定的 10 行数据，正在通过 JSON 刷新。前端将始终显示 10 行，因此每隔 10 秒，表格(前端)将始终显示 10 行新数据。

Django 版本 1.11

这是python文件

View .py

def prices(request):
    prices = Price.objects.all().order_by('id')
    return render(request, 'prices.html', {'prices':prices})

价格.html

<div class="col-md-8">
     <table class="table table-striped">
         <thead>
             <tr>
                 <th>TYPE</th>
                 <th>NAME</th>
                 <th>PRODUCT</th>
                 <th>VALUE</th>                 
             </tr>
         </thead>
         <tbody>
         {% for price in prices %}
             <tr>
                 <td>{{ price.type }}</td>
                 <td>{{ price.name }}</td>
                 <td>{{ price.product }}</td>
                 <td>{{ price.value }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>

网址.py

urlpatterns = [
     url(r'^prices/', product_views.prices, name='prices'),
     url(r'^admin/', admin.site.urls),
]

Answer 1

创建一个返回指定表中所有行的 Django View 。现在创建一个 ajax 函数，每 10 秒轮询一次 django View (通过 url)。

使用 jquery，你必须像这样包含 jquery cdn:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">

现在 ajax function (jquery ajax)

var updateTable = $.ajax({

                method: "GET",
                url: "prices/",


                success: function(data, textStatus, request) {

                console.log(data) 
                //update your DOM with new data recieved in **data**

            }
        });

setInterval(updateTable,10000);

每 10 秒执行一次此 ajax 函数。请记住， View 将返回带有表格的原始 html。可以在您编写的 ajax 函数的成功回调函数中访问此数据。现在你必须用你在 data 变量中得到的新表更新你的 DOM。尝试从成功回调中运行 console.log(data) 以查看服务器的响应。