Mực bình thường lấy dữ liệu json để hiển thị

Question

Tôi hiện đang cố hiển thị danh sách các giá trị được cập nhật sau mỗi 5 giây vào cơ sở dữ liệu sqlite.

tôi có thể quản lý để chuyển đổi kết quả sang một định dạng JSON bằng cách sử dụng đoạn mã sau:

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

Duyệt đến trang web thông qua trình duyệt trả về

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

Tôi muốn có dữ liệu này được cập nhật trên trang web định kỳ mà không tải lại toàn bộ trang. Tôi đang gặp khó khăn ở rào cản đầu tiên và không thể nhận được dữ liệu thực tế để hiển thị. Mã HTML tôi đang sử dụng là

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

Tôi đã chọn mã từ các ví dụ nhưng tôi cần con trỏ.

GIẢI PHÁP !!

New HTML Mã

<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

gọi AJAX của bạn nên tự động phát hiện một phản ứng JSON, nhưng nó sẽ không làm tổn thương để nói một cách rõ ràng jQuery về nó:

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

Tham số contentType duy nhất là được sử dụng cho yêu cầu POST, cho máy chủ biết loại dữ liệu bạn đã gửi.

Đối tượng data chứa bất kỳ phản hồi Flask jsonify() nào của bạn được trả về; trong trường hợp này, nó sẽ là đối tượng JavaScript với các phím BoilerRoom, v.v.

Kể từ khi bạn đang tải JSON qua một yêu cầu GET, bạn cũng có thể sử dụng jQuery.getJSON() method đây:

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

này không chính xác giống như các $.ajax() gọi nhưng bạn có thể bỏ qua các thông số type và dataType, và các tham số url và success chỉ là các yếu tố vị trí.