Python / Flask / HTML - отображать HTML в новом окне вместо домашней страницы - PullRequest
0 голосов
/ 21 февраля 2019

У меня есть код Python, где я использую Flask для создания веб-страницы.На домашней странице я заполняю форму, отправляю ее с помощью кнопки, и она отображает таблицу на основе входных данных.

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

Это мой код:

Код Python

from flask import Flask, render_template, request,
app = Flask(__name__)

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("/table", methods = ['POST'])
def table():
    user_input = request.form['input']
    dict_table = get_table(user_input)     //return list of dictionaries
    return render_template('table.html', dict_table=dict_table)

if __name__ == '__main__':
    app.run(debug=True)

home.html

<!DOCTYPE html>
<html>
<head>
   <title>Homepage</title>
</head>
<body>
        <form action="/table" method="post">
            <select name="input">
               <option value="1">Input</option>
            </select>
           <button type="submit">Click Me!</button>
        </form>
</body>
</html>

table.html

<!DOCTYPE html>
<html>
<head>
   <title>Table</title>
</head>
<body>
        <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>
</body>
</html>

Может кто-нибудь объяснить, как я могу нажать на форму отправитьнажмите кнопку на моей домашней странице, , чтобы остаться на домашней странице home.html, и откройте таблицу из table.html в новом окне (возможно, используя window.open() из JavaScript или чего-то еще)?

Я был бы признателен, если бы кто-нибудь помог мне разобраться в том, как это сделать с предоставленным моим кодом, и показал бы мне, где конкретно вызывать функции и тому подобное.Я новичок в Flask / HTML / JS, и я просто пытаюсь учиться для личного использования, и я получаю разочарование, читая ссылки и документы, которые показывают, как отображать URL-адрес, такой как google.com, на новой вкладке, что не то, что я хочу. Спасибо!

1 Ответ

0 голосов
/ 21 февраля 2019

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

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

Step2 : решение вашей проблемы

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...