时间戳

首页 > 解决方案 > 在更新 mysqlDatabase 内容时刷新 django 模板中的表内容

ajax - 在更新 mysqlDatabase 内容时刷新 django 模板中的表内容

问题描述

我是 django 和 Ajax 的新手。我能够从 mysql 数据库中获取数据库内容，现在我希望每次在数据库中更新数据时，我的表也应该更新。我知道我必须使用 ajax，但我不知道如何进行。请帮助我如何进行？这是我的Views.py

def index(request):
testBenchdb = TestBenchDB.objects.all()
template = loader.get_template('TestBench/MainView.html')
context = {
    'testBenchdb': testBenchdb,
}
return HttpResponse(template.render(context, request))

这是我的模型课

class TestBenchDB(models.Model):
Sl_No= models.IntegerField
TestBenchID= models.CharField(max_length=200)
project = models.CharField(max_length=200)
status= models.CharField(max_length=200)
TestPass = models.IntegerField
TestFail=models.IntegerField
FrameworkErrors=models.IntegerField
LastUpdated=models.DateTimeField

这是我的模板

 <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon? 
 family=Material+Icons">
 <style>
.blueboxed {
    border: 10px solid #b9fcff;
    background: #b9fcff;
}
    .GreyBoxed{
        border: 10px solid #f2f2f2;
    background: #f2f2f2;

    }
    .WhiteSpace
    {
         border: 5px solid #ffffff;
    background: #ffffff;
    }
    table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
    td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
 }
    tr:nth-child(even) {
 background-color:rgba(170,236,255,0.86);

 }
th{
    background-color: rgba(8,153,255,0.86)
;
}
tr{
     -moz-box-shadow: 3px 3px 5px #535353;
    -webkit-box-shadow: 3px 3px 5px #535353;
    box-shadow: 3px 3px 5px #535353;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px 6px 6px 6px;
}
    .roundbox {

}
</style>

</head>
<body>
<div class="roundbox">
<div class="blueboxed">
<p style="text-align:left;">Dr.PotatoHead
<span style="float:right;"><a href="url">SignOut</a></span>
</p>
</div>
<br>
<div class="GreyBoxed">
<p><a href="url">Refresh</a> <a href="url">Add Bench</a> <a 
href="url">StopServers</a></p>
</div>
<br>
<table>
<tr>
    <th>Sl.No.</th>
    <th>Test Bench Id</th>
    <th>Project</th>
    <th>Status</th>
    <th>Test Pass</th>
    <th>Test Fail</th>
    <th>Framework Errors</th>
    <th>Last Updated</th>
    <th>Actions</th>
 </tr>

    {% if testBenchdb %}
    {% for tb in testBenchdb %}
        <tr>
            <td>{{  tb.id}}</td>
            <td>{{ tb.TestBenchID }}</td>
            <td>{{tb.project}}</td>
            <td>{{tb.status}}</td>
            <td>100</td>
            <td>10</td>
            <td>1</td>
            <td>4/20/2018 3:13:56 PM</td>
            <td>
                <button style="font-size:12px"><i class="material- 
          icons">pause</i></button>
                <button style="font-size:12px"><i class="material- 
          icons">error</i></button>
                <button style="font-size:12px"><i class="material- 
          icons">settings_backup_restore</i></button>
                <button style="font-size:12px"><i class="material- 
          icons">help_outline</i></button>
            </td>
         </tr>

    {% endfor %}
    {% endif %}

  </table>
  {#   <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>#}
  {#<script>#}
  {#    var append_increment = 0;#}
  {#    setInterval(function() {#}
  {#        $.ajax({#}
  {#            type: "GET",#}
  {#            url: {% url 'index' %},  // URL to your view that serves new 
  info#}
  {#            data: {'append_increment': append_increment}#}
  {#        })#}
  {#        .done(function(response) {#}
  {#            $('#_appendHere').append(response);#}
  {#            append_increment += 10;#}
  {#        });#}
  {#    }, 10000)#}
  {#</script>#}

  </div>
  </body>
  </html>

标签： ajaxdjangodjango-modelsdjango-templates

解决方案

有两种方法可以实现这一目标：

  1. Web Sockets：Web Socket 允许您在客户端和服务器之间进行双工通信。一旦客户端通过 Web 套接字连接到服务器，服务器也可以启动通信。如今，几乎所有现代浏览器都支持 Web Sockets。供参考：https ://www.youtube.com/watch?v=plYRxKUow5w
  2. 长轮询您的服务器：在这种情况下，您的客户端将向您的服务器发送一个获取请求。如果为客户端呈现的版本有任何更改，服务器将暂停请求并检查数据库。这里可能有3种可能性：

如果没有变化并且没有达到保持超时；该过程将继续保持请求并在一段时间后再次轮询数据库。

如果有更改且未达到保持超时；然后该过程会将更改返回给客户端。

如果没有变化并达到保持超时；然后该过程将返回，表明没有变化。

在收到服务器的响应后，客户端将再次执行 get 请求。整个过程将不断重复。

注意事项：请适当设置保持超时，否则您的客户将继续等待。在客户端上设置超时，以便如果它没有收到服务器的回复，那么它可以重新发起请求。

供参考：https ://www.youtube.com/watch?v=vaIcwhfuweo

推荐阅读