पायथन फ्लास्क को

Question

प्रदर्शित करने के लिए जेसन डेटा मिलता है मैं वर्तमान में उन मानों की एक सूची प्रदर्शित करने की कोशिश कर रहा हूं जो प्रत्येक 5 सेकंड को SQLite डेटाबेस में अपडेट करते हैं।

मैं निम्नलिखित कोड का उपयोग कर एक JSON प्रारूप में परिणामों को परिवर्तित करने के लिए प्रबंधन कर सकते हैं:

@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()) 

एक ब्राउज़र के माध्यम वेबपेज पर नेविगेट कर देता है

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

मैं इस डेटा करना चाहते हैं पूरे पृष्ठ को फिर से लोड किए बिना समय-समय पर किसी वेबपृष्ठ पर अपडेट किया गया। मैं पहली बाधा पर अटक गया हूं और वास्तविक डेटा प्रदर्शित करने के लिए नहीं मिल सकता है। एचटीएमएल कोड मैं उपयोग कर रहा हूँ

{% 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 %} 

मैं उदाहरण से कोड चुनते ही है, लेकिन मैं एक सूचक की जरूरत होती है।

सोल्ड !!

नई एचटीएमएल कोड

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

Answer 1

आपका AJAX कॉल एक JSON प्रतिक्रिया की स्वत: पहचान करना चाहिए, लेकिन यह स्पष्ट रूप से इसके बारे में बताने के लिए jQuery चोट नहीं होगा:

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

contentType पैरामीटर केवल है POST अनुरोध के लिए उपयोग किया गया, सर्वर को बता रहा है कि आपने किस प्रकार का डेटा भेजा था।

data ऑब्जेक्ट में जो भी आपका फ्लास्क jsonify() प्रतिक्रिया लौटा दी गई है; इस मामले में यह BoilerRoom, आदि कुंजी के साथ एक जावास्क्रिप्ट ऑब्जेक्ट होगा।

आप GET अनुरोध से अधिक JSON लोड कर रहे हैं के बाद से, आप के रूप में अच्छी jQuery.getJSON() method यहाँ का उपयोग कर सकते हैं:

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

यह ठीक $.ajax() कॉल के रूप में ही होता है, लेकिन आप type और dataType मानकों को छोड़ देते हैं पर आते हैं, और url और success पैरामीटर केवल स्थितित्मक तत्व हैं।