每 5 秒更新一次 Django 模板失败

Question

我正在构建一个 Django 项目并尝试使用 AJAX。我需要使用来自 Raspberri Pi 每 5 秒的新数据刷新我的模板。数据存储在 SQLite 数据库中。

我是 Django 新手，对 Ajax 很陌生。我尝试从一些基本的东西开始，这是我的代码：

view.py

from django.http import HttpResponse
from django.template import RequestContext,loader
from .models import Results

def index(request):
    return HttpResponse(loader.get_template('mysensor/index.html').render(RequestContext(request,{'latest_results_list':Results.objects.all()})))


def update(request):
     return HttpResponse(loader.get_template('mysensor/index.html').render(RequestContext(request,{'latest_results_list':Results.objects.all()})))

我的模板：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
 <script type="text/javascript">


    $( document ).ready(function() {
       setInterval(function(){
           $.ajax({
               url:'/mysensor/update' ,
               type: "get",
               cache: true,
               timeout: 30000,
               dataType: 'html',
               success: function(data) {
                   console.log("success");
                   $('#MyTable').html(data);
               },
               error: function(data) {
                   alert("Got an error dude "+data);
               }
           });
       },5000);
    });

 </script>

<table id="MyTable">
<tr>
  <th>Date</th>
  <th>Time</th>
  <th>Temperature</th>
 <th>Humidity</th>
</tr>
{% for b in latest_results_list %}
<tr>
  <td>{{ b.date }}</td>
  <td>{{ b.time }}</td>
  <td>{{ b.temperature }}</td>
<td>{{ b.humidity }}</td>
</tr>
{% endfor %}
</table>

在运行时，我的网页崩溃并分析服务器日志，表格并没有像我预期的那样每 5 秒刷新一次，而是崩溃了。

服务器日志片段：

[21/Sep/2015 10:43:46] "GET /mysensor/ HTTP/1.1" 200 7517
[21/Sep/2015 10:43:51] "GET /mysensor/update HTTP/1.1" 301 0
[21/Sep/2015 10:43:51] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:43:56] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:43:56] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:01] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:01] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:01] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:01] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:06] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:06] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:06] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:06] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:06] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:06] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:06] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:07] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:11] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:11] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:11] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:11] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:11] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:11] "GET /mysensor/update/ HTTP/1.1" 200 7517
[21/Sep/2015 10:44:11] "GET /mysensor/update/ HTTP/1.1" 200 7517

任何建议将不胜感激。 提前致谢。

Answer 1

您只想更新表格，但 ajax 请求返回的data 将包含整个 html，包括脚本。

您要么希望将模板更改为仅在执行 ajax 请求时返回表格，要么更改 javascript 以在更新表格之前从数据中提取表格内容。

第一种方法可能更优雅。您可能会发现库 django-pjax 很有趣，它做了这样的事情。

但是，使用 jQuery 提取表格真的很容易。

var table_html = data.filter('#MyTable').html();
$('#MyTable').html(table_html);

Answer 2

在views.py中你可能应该返回像这样的JSON数据

import json
from django.http import HttpResponse
...
def my_ajax(request):
    data = {
        'key1': 'val1',
        'key2': 'val2',
    }
    return HttpResponse(json.dumps(data))

Answer 3

这对我有用：

views.py：

from django.http import HttpResponse
from django.template import RequestContext,loader
from .models import Results

from django.http import JsonResponse

def index(request):
    return HttpResponse(loader.get_template('mysensor/index.html').render(RequestContext(request,{'latest_results_list':Results.objects.all()})))

def update(request):
     results = [ob.as_json() for ob in Results.objects.all()]
     return JsonResponse({'latest_results_list':results})

模板：

<script type="text/javascript" src="{{STATIC_URL}}jquery-1.11.3.min.js"> </script>

<script type="text/javascript">   
    $( document ).ready(function() {
       setInterval(function(){
            $.getJSON('/mysensor/update',
                    function (data) {
                        var json = data['latest_results_list'];
                        var tr;
                         $('#myTable tbody').html("");
                        for (var i = 0; i < json.length; i++) {
                            tr = $('<tr/>');
                            tr.append("<td>" + json[i].date + "</td>");
                            tr.append("<td>" + json[i].time + "</td>");
                            tr.append("<td>" + json[i].temperature + "</td>");
                            tr.append("<td>" + json[i].humidity + "</td>");
                             $('#myTable tbody').append(tr);

                        }
                    });
       },5000);
    });

</script>

<table id ='myTable'>
    <thead>
    <tr>
      <th>Date</th>
      <th>Time</th>
      <th>Temperature</th>
      <th>Humidity</th>
    </tr>
    </thead>
    <tbody >
         {% for b in latest_results_list %}
             <tr>
             <td>{{ b.fecha }}</td>
             <td>{{ b.tiempo }}</td>
             <td>{{ b.temperatura }}</td>
             <td>{{ b.humedad }}</td>
             </tr>                 
         {% endfor %}
    </tbody >        
</table>

这些答案帮助我找到了解决方案：

• Creating a JSON response using Django and Python
• Parsing JSON objects for HTML table
• How to serialize to JSON a list of model objects in django/python