如何使用 Flask 从 html select 标签获取 selected 值

Question

我知道以前有人问过这个问题，但我已经浏览了所有帖子，none 的解决方案似乎对我有用。

请多多包涵。我是 Flask 和 html 的新手，正在尝试构建我的第一个网络应用程序。

它应该按如下方式工作：用户上传 Excel 工作簿，工作簿 header 显示在下拉列表中使用 html "select “ 标签。然后用户应该 select header 之一。然后我想将 selected header 传递给一个函数。

我可以在下拉列表中显示工作簿 headers，但是当我 select 一个 header 时，没有任何反应。有谁知道我做错了什么吗？

请参阅下面的 python 代码：

import flask
from flask import Flask
from flask import request
import pandas as pd

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    global headers_list
    headers_list=[]

    if request.method == "POST":
        df=request.files["file"]
        if df:
            df=pd.read_excel(df)
            headers_list=get_headers(df)
            selected_header = request.form.get("header")
            print(str(selected_header)) #to test the code
        else:
            print("No file selected")
    return (flask.render_template("./index.html", headers_list=headers_list))

def get_headers(dataframe):
    headers=list(dataframe.columns)
    return headers

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

HTML 下面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content=""
        <title><Contra Tool</title>
        
    </head>

    <body>
        <h1>Contra Tool</h1>
        <p>Describe functionality</p>
        <br/>
    </body>

    <form action="" method="post" enctype=multipart/form-data>
        <label for ="myfile" > Select a file:</label>
        <input type="file" id="myfile" name="file" EnableViewState=True>
        <input type="submit" value="Upload">

    </form>

    <br><br>
    
    <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
        <div>
            <form action="" method="POST">
                <SELECT class="dropdown-content" name="header" method="POST" action="/">
                    <ul>
                        <option value="{{headers_list[0]}}" selected>{{headers_list[0]}}</option>
                        {% for h in headers_list[1:]%}
                            <option value="{{h}}">{{h}}</option>
                        {% endfor %}
                    </ul>
                </SELECT>

            </form>

        </div>
    </div>
    
    <br/>
    <input type="submit">

</html>

Answer 1

因为我假设您不想在服务器上保存 excel 文件，所以在我看来，仍然存在文件传输两次的变体。
如果用户 select 有一个文件，它会在后台传输以查询 header 列。 select 元素填充了收到的信息。
从现在开始，可以 select 编辑一个列，并且可以传输表格。

在我的示例中有两条路线。一个显示和处理表格，另一个根据要求 returns header 列以 JSON 格式。

from flask import Flask 
from flask import abort, jsonify, render_template, request
import pandas as pd

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST' and 'file' in request.files:
        file = request.files['file']
        df = pd.read_excel(file)
        head = request.form.get('head');
        print(f'selected "{head}"')
    return render_template('index.html')

@app.route('/headers', methods=['POST'])
def headers():
    if 'file' in request.files:
        file = request.files['file']
        df = pd.read_excel(file)
        headers = list(df.columns)
        return jsonify(headers=headers)
    abort(400)

如果用户 select 有一个文件，它会通过 AJAX 发送到第二条路由。 select 元素被清空并重新填充，所有必要的其他元素在收到服务器的响应后可用。如果用户按下提交，完成的表单将与文件和 selected 列一起发送。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form method="POST" enctype="multipart/form-data">
      <input type="file" name="file" id="file" />
      <select name="head" id="head" disabled>
        <option>Choose Header</option>
      </select>
      <input type="submit" id="submit" disabled />
    </form>

    <script type="text/javascript">
      (() => {
        const fileElem = document.getElementById('file');
        fileElem.addEventListener('change', evt => {
          const formData = new FormData();
          formData.append('file', evt.target.files[0]);
          fetch('/headers', { method: 'POST', body: formData })
            .then(resp => resp.json())
            .then(data => {
              // clear select options
              const selectElem = document.getElementById('head');
              for (let i=selectElem.options.length-1; i >= 0; --i) {
                  selectElem.remove(i);
              }

              // populate select options
              const headers = data['headers'];
              for (const head of headers) {
                const optElem = document.createElement('option');
                optElem.value = head;
                optElem.innerHTML = head;
                selectElem.append(optElem);
              }
              selectElem.disabled = false;

              const elem = document.getElementById('submit');
              elem.disabled = false;
            });
        });
      })();
    </script>
  </body>
</html>

请记住，这是一个最小的示例，可能需要进行调整和修改以满足您的要求。

如何使用 Flask 从 html select 标签获取 selected 值

How to get the selected value from html select tag using Flask

html

python

select

flask