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)
  

• После того, как мы атакуем шаблоны:

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

  • таблица.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',
  

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

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

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

   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), затем вызывает функцию получить_таблицу() (передавая ему переменную x в параметре), которая возвращает список словарей, и, наконец, возвращает страницу таблица.html со списком словарей в параметре:

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

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