Python / Flask / HTML - отображать HTML в новом окне вместо домашней страницы

Шаг 1 : Проверьте эту ссылку, которая объясняет, как использовать Jquery и Ajax с FLASK

Ключевой концепцией здесь является AJAX ( асинхронный JavaScript и XML ). Короче говоря, это архитектура, которая позволяет отправлять запросы на сервер в фоновом режиме (так называемые асинхронные запросы), а затем изменяет содержимое страницы, отображаемой в настоящее время веб-браузером, в соответствии с результатом, полученным с сервера, избегая а также сервер не передает всю страницу снова.

Шаг 2 : решение вашей проблемы

• Сначала мы напишем маршруты :

  from flask import Flask, render_template, request,
  app = Flask(__name__)
  
  user_input = None
  
  def get_table(user_input):
      ...
      return dict    //returns list of dictionaries, for example... 
                     //dict = [{'name':'Joe','age':'25'},
                    //        {'name':'Mike','age':'20'}, 
                    //        {'name':'Chris','age':'29'}] 
  
  @app.route('/')
  def home():
      return render_template('home.html')
  
  @app.route('/_ajax_user_input')
  def ajax_user_input():
       global user_input
       user_input = request.args.get('user_input', 0, type=int)
       return "ok"
  
  @app.route("/table")
  def table():
      x = user_input
      dict_table = get_table(x)     //return list of dictionaries
      return render_template('table.html', dict_table=dict_table)
  

[ 1112]

После атаки на шаблоны :

• home.html :

  <select id="input" name="input">
      <option value="1">Input</option>
  </select>
  <button type="button" class="test"> Click Me! </button>
  
  <script>
      $(document).ready(function(){
          $('.test').bind('click', function() {
              $.getJSON($SCRIPT_ROOT + '/_ajax_user_input',{
                  user_input: $('#input').val(),
              },function() {
                  window.open('http://127.0.0.1:5000/table', '_blank');
              });
              return false;
          });
      });
  </script>
  

• ]

  table.html :

  <table id="table">
      {% if dict_table %}
          <tr>
              {% for key in dict_table[0] %}
                  <th>{{ key }}</th>
              {% endfor %}
          </tr>
      {% endif %}
  
      {% for dict in dict_table %}
          <tr>
              {% for value in dict.values() %}
                  <td>{{ value }}</td>
              {% endfor %}
          </tr>
      {% endfor %}
  </table>
  

В основном вот что происходит:

• Когда я нажимаю на свою кнопку, я вызываю скрипт Javascript:

   $('.test').bind('click', function() {
  

• Это отправляет запрос ajax в FLASK, который состоит в выполнении ajax_user_input () Функция :

   $.getJSON($SCRIPT_ROOT + '/_ajax_user_input',
  

• В эту функцию я отправляю данные (значение, выбранное пользователем в теге выбора), и эти данные сохраняются в переменной user_input :

   user_input: $('#input').val(),
  

• На стороне Flask я получаю данные и сохраняю их в глобальной переменной, которую я тоже назвал user_input : [ 1132]

   global user_input
   user_input = request.args.get('user_input', 0, type=int)
  

• Затем в моем скрипте я вызываю метод javascript, который позволяет мне откройте URL в новой вкладке ( подробнее здесь ):

   window.open('http://127.0.0.1:5000/table', '_blank');
  

• Маршрут 'таблица' хранит в переменной x данные, ранее сохраненные в моя глобальная переменная ( user_input ), затем она вызывает функцию get_table () (передавая ему переменную x в параметре), которая возвращает список словарей и, наконец, возвращает страница table.html со списком словарей в параметре:

   x = user_input
   dict_table = get_table(x)
   return render_template('table.html', dict_table=dict_table)
  

Я надеюсь, что это поможет вам, хотя я убежден, что есть много другие способы сделать это, возможно, более эффективные.