2014-07-14 48 views
5

Şu anda, her 5 saniyede bir sqlite veritabanına güncellenen değerlerin listesini görüntülemeye çalışıyorum.Python Flask json verilerini gösterecek

Aşağıdaki kodu kullanarak bir JSON biçiminde sonuçları dönüştürmek için yönetebilirsiniz

:

@app.route('/_status', methods= ['GET', 'POST']) 
def get_temps(): 
    db = get_db() 
    cur = db.execute('select sensor_name, temp from cur_temps ORDER BY sensor_name') 
    #cur_temps = cur.fetchall() 
    return jsonify(cur.fetchall()) 

bir tarayıcı üzerinden web sayfasına gitme

{ 
    "BoilerRoom": 26.44, 
    "Cylinder1": 56.81, 
    "Cylinder2": 39.75, 
    "Cylinder3": 33.94 
} 

ben bu verileri istiyorum döndürür Tüm sayfayı tekrar yüklemeden periyodik olarak bir web sayfasında güncellendi. İlk engele takılıyorum ve görüntülenecek gerçek verileri alamıyorum. kullanıyorum HTML kodunu ben örneklerden kod aldı ettik

{% extends "layout.html" %} 
{% block body %} 
<script type=text/javascript> 
    $(function() { 
    $("#submitBtn").click(function() { 
     $.ajax({ 
      type: "GET", 
      url: $SCRIPT_ROOT + "_status", 
      contentType: "application/json; charset=utf-8", 
      success: function(data) { 
       $('#Result').text(data.value); 
      } 
     }); 
    }); 
    }); 
</script> 

<strong><div id='Result'></div></strong> 

{% endblock %} 

ama bir pointer muhtaç değilim.

SOLVED !!

Yeni HTML Kod

<script type=text/javascript> 
function get_temps() { 
    $.getJSON("_status", 
      function (data) { 
       $('#Cyl1').text(data.Cylinder1) 
       $('#Cyl2').text(data.Cylinder2) 
       $('#Cyl3').text(data.Cylinder3) 
       $('#BRoom').text(data.BoilerRoom); 
      } 
    ); 
} 
setInterval('get_temps()', 5000); 
</script> 

<table id="overview"> 
    <tr> 
     <th>Location</th> 
     <th>Temperature</th> 
    </tr> 
    <tr> 
     <td>Cylinder Top</td> 
     <td id="Cyl1"></td> 
    </tr> 
    <tr> 
     <td>Cylinder Middle</td> 
     <td id="Cyl2"></td> 
    </tr> 
    <tr> 
     <td>Cylinder Bottom</td> 
     <td id="Cyl3"></td> 
    </tr> 
    <tr> 
     <td>Boiler Room</td> 
     <td id="BRoom"></td> 
    </tr> 

</table> 

cevap

2

Sizin AJAX çağrısı JSON yanıtı otomatik algılama olmalı, ama açıkça bu konuda jQuery söylemek zarar vermez:

$.ajax({ 
    type: "GET", 
    url: $SCRIPT_ROOT + "_status", 
    dataType: 'json', 
    success: function(data) { 
     $('#Result').text(data); 
    } 
); 

contentType parametre sadece POST isteği için sunucuya ne tür veri yolladığınızı bildirir.

data nesnesi, Flask jsonify() yanıtınızın geri döndüğü ne olursa olsun; Bu durumda, BoilerRoom vb. ile bir JavaScript nesnesi olacaktır. Bu tam $.ajax() araması olarak aynısını yapar

$.getJSON(
    $SCRIPT_ROOT + "_status", 
    function(data) { 
     $('#Result').text(data); 
    } 
); 

ama type ve dataType parametreleri ihmal olsun: Bir GET isteği üzerine JSON yüklüyorsunuz beri

, siz de jQuery.getJSON() method burada kullanabiliriz ve url ve success parametreleri yalnızca konumsal öğelerdir.

+0

Çok teşekkürler Martijn, çok güzel bir şekilde şimdi otomatik yenileme ile çalışıyor :). – craigdabbs