Flask + AJAX + JQuery + JINJA для динамического обновления таблицы HTML

Question

Я хочу динамически отображать статус порта. Я не хочу перезагружать страницу, чтобы увидеть новое значение. Я знаю, как получить статус порта в Python (используя uiApi()). Сейчас я создаю шаблон со значением и показываю значения в таблице HTML. Как я могу постоянно обновлять таблицу со значением из Flask? У меня есть AJAX и jquery.

Колба Кодекс Приводит:

@app.route('/') 
    def show_auth(): 
     tData = uiApi() 
     .. 

     return render_template('show_auth.html', tMain=tData) 

на {{поле}} в HTML-файле 'show_auth.html' ниже, должна быть динамически обновляться:

<form action="{{ url_for('submit_token') }}" method=post> 
    <div id="Main" class="tabcontent" style="display:block" > 
    <div class="PanelWrapper" > 
     <div class="pageTitle">WAN</div> 
     <div class="layout"> 
     <div class="col"> 
      <table frame="void" rules="none"> 
      <tbody> 
       {%for key, field in tMain.items() %} 
       <tr> 
       <td class="attrLabel" valign="middle" nowrap>{{key}}</td> 
       <td class="attrLabel" valign="middle">:&nbsp;</td> 
       <td>{{field}}</td> 
       </tr> 
       {% endfor %} 
      </tbody> 
      </table> 
     </div> 
... 
.... 

Answer 1

Вам понадобится два вещи: маршрут для запроса AJAX, который вернет ваши данные, отформатированные как JSON (должно быть довольно легко сделать с функцией Flask jsonify).

Как только вы установили эту настройку маршрута, вам необходимо позвонить ей с помощью вызова AJAX. Используя jQuery, он чувствует себя безболезненным (но вы можете сделать это и с ванильным JS).

<script> 
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; 
    (function(){ 
     $.getJSON(
      $SCRIPT_ROOT+"/_stuff", // Your AJAX route here 
      function(data) { 
       // Update the value in your table here 
      } 
     ); 
     setTimeout(arguments.callee, 10000); 
    })(); 
</script> 

В сниппета выше вам нужно будет указать путь вашего маршрута AJAX, и делать вещи со значением data. Для быстрого теста вы можете просто console.log(data) и проверить, хороши ли возвращенные данные.

Обратите внимание, что приведенные выше фрагменты используют анонимную функцию и будут извлекать ваши данные каждые 10 секунд (10000 мс).

Я надеюсь, что поможет

Документация:
Ajax with Flask
jQuery.getJSON