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

Posted 2023-02-24

技术标签:

【中文标题】在更新 mysqlDatabase 内容时刷新 django 模板中的表内容【英文标题】：Refresh table content in django template on updation of mysqlDatabase content 【发布时间】：2018-10-13 07:48:02 【问题描述】：

我是 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>

【问题讨论】：

所以您想在数据库表中的数据发生变化时将数据从服务器推送到浏览器？是的，这是我第一次能够获取数据，但后来当数据库发生一些变化时，我希望我的表得到相应的更新。 【参考方案1】：

有两种方法可以实现：

Web Sockets

长时间轮询您的服务器

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

如果有更改并没有达到保持超时；然后进程会将更改返回给客户端。

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

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

注意事项：请适当设置暂停超时，否则您的客户会一直等待。在客户端也设置超时，这样如果它没有收到服务器的回复，它就可以重新发起请求。

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

【讨论】：