Python / Flask / HTML-在新窗口而非首頁中呈現HTML

Question

我有一個使用Flask創建網頁的Python代碼。 在主頁中，我填寫了一個表單，使用一個按鈕提交，它根據輸入內容顯示一個表格。

我遇到的問題是， 一旦單擊按鈕提交表單，它就會在同一網頁上呈現表格。 我想使用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中的表在新窗口中打開 （也許使用Windows中的 window.open() JavaScript或其他內容）？

如果有人可以指導我完成提供的代碼來執行此操作的步驟，並特別向我展示在何處調用函數之類的東西，我將不勝感激。 我是新來瓶/ HTML / JS，我只是想學僅供個人使用，我得到的是只顯示了如何在一個新的選項卡中顯示如google.com的URL，這是沮喪的閱讀鏈接和文檔不是我想要的 謝謝！

Answer 1

步驟1 ：查看此鏈接，其中說明了如何在FLASK中使用Jquery和Ajax

這里的關鍵概念是AJAX（ 異步JavaScript和XML ）。 簡而言之，它是一種架構，可以在后台將請求發送到服務器（稱為異步請求），然后根據從服務器接收到的結果修改Web瀏覽器當前顯示的頁面的內容，避免了以及服務器不會再次傳輸完整頁面。

第二步 ：解決您的問題

首先我們寫路線 ：

 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方法，該方法允許我在新標簽頁中打開網址（此處有更多詳細信息）：
```
  window.open('http://127.0.0.1:5000/table', '_blank'); 
```
'table'路由將先前存儲在我的全局變量（ user_input ）中的數據存儲在變量x中，然后調用get_table（）函數（通過向他傳遞變量x in參數），該函數返回字典列表，並且最后，它返回page.html頁面，其中帶有在參數中的字典列表：
```
  x = user_input dict_table = get_table(x) return render_template('table.html', dict_table=dict_table) 
```

我希望這會對您有所幫助，即使我確信還有很多其他方法可以這樣做，也許更有效。

Python / Flask / HTML-在新窗口而非首頁中呈現HTML

問題描述

1 個解決方案

解決方案1
2 已采納 2019-02-21 15:32:47

Python / Flask / HTML-在新窗口而非首頁中呈現HTML

問題描述

1 個解決方案

解決方案1 2 已采納 2019-02-21 15:32:47

解決方案1
2 已采納 2019-02-21 15:32:47