Question

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

Answer 1

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

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

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

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

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

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

谨慎提示：请适当设置保持超时，否则客户将继续等待。在客户端上设置超时，这样如果它没有从服务器收到回复，那么它可以重新发起请求。

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

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

1 个答案: