Ajax 每5秒更新Django模板失败_Ajax_Django_Setinterval

Ajax 每5秒更新Django模板失败

ajax django

Ajax 每5秒更新Django模板失败,ajax,django,setinterval,Ajax,Django,Setinterval,我正在构建一个Django项目，并尝试使用AJAX。我需要刷新我的新数据，每5秒来自树莓Pi的模板。数据存储在SQLite数据库中我不熟悉Django，也不熟悉Ajax。我试着从一些基本的东西开始，下面是我的代码： view.py from django.http import HttpResponse from django.template import RequestContext,loader from .models import Results def index(request

我正在构建一个Django项目，并尝试使用AJAX。我需要刷新我的新数据，每5秒来自树莓Pi的模板。数据存储在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>

如有任何建议，将不胜感激。

提前感谢。

您只想更新表，但是ajax请求返回的

数据将包含整个html，包括脚本
您可以更改模板以仅在执行ajax请求时返回表，或者更改javascript以在更新表之前从数据中提取表内容
第一种方法可能更优雅。你可能会发现这个图书馆很有趣，它是这样做的
但是，使用jQuery提取表非常容易
var table_html = data.filter('#MyTable').html();
$('#MyTable').html(table_html);

您只想更新表，但是ajax请求返回的数据将包含整个html，包括脚本
您可以更改模板以仅在执行ajax请求时返回表，或者更改javascript以在更新表之前从数据中提取表内容
第一种方法可能更优雅。你可能会发现这个图书馆很有趣，它是这样做的
但是，使用jQuery提取表非常容易
var table_html = data.filter('#MyTable').html();
$('#MyTable').html(table_html);

例如，在views.py中，您可能应该像下面这样返回JSON数据
import json
from django.http import HttpResponse
...
def my_ajax(request):
    data = {
        'key1': 'val1',
        'key2': 'val2',
    }
    return HttpResponse(json.dumps(data))

例如，在views.py中，您可能应该像下面这样返回JSON数据
import json
from django.http import HttpResponse
...
def my_ajax(request):
    data = {
        'key1': 'val1',
        'key2': 'val2',
    }
    return HttpResponse(json.dumps(data))

这对我很有用：
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>


$（文档）.ready（函数（）{
setInterval（函数（）{
$.getJSON（“/mysensor/update”，
功能（数据）{
var json=data['latest_results_list']；
var-tr；
$（'#myTable tbody'）.html（“”）；
for（var i=0；i

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




这对我来说很有效：
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>


$（文档）.ready（函数（）{
setInterval（函数（）{
$.getJSON（“/mysensor/update”，
功能（数据）{
var json=data['latest_results_list']；
var-tr；
$（'#myTable tbody'）.html（“”）；
for（var i=0；i

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




您只想更新表，但是ajax请求返回的数据将包含整个html，包括脚本。您可以在执行ajax请求时更改模板以仅返回表，或者在执行$（“#MyTable”）.html（）之前更改javascript以从数据中提取表内容。好的，这是我没有考虑的问题，我将修复它，然后看看会发生什么。顺便问一下，您推荐哪种解决方案最好？使用jQuery提取内容可能是最简单的。请参见下面我的答案。您只想更新表，但是ajax请求返回的数据将包含整个html，包括脚本。您可以在执行ajax请求时更改模板以仅返回表，或者在执行$（“#MyTable”）.html（）之前更改javascript以从数据中提取表内容。好的，这是我没有考虑的问题，我将修复它，然后看看会发生什么。顺便问一下，您推荐哪种解决方案最好？使用jQuery提取内容可能是最简单的。请参阅下面的答案。使用jQuery提取表（如您所建议的）解决了我的部分问题（即javascript只执行一次），但数据仍然不会更新。更确切地说，自从我第一次看到缺少var时，表\u html就没有定义，但是，对于var，sameI的投票结果是一致的，因为您的回答帮助我找到了解决方案，感谢使用jQuery跟踪表（正如您所建议的）解决了我的部分问题（即javascript只执行一次），但数据仍然没有更新。更确切地说，表\u html是未定义的