如何使用 Flask 从 html select 标签中获取选定的值

Question

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

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

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

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

请看下面的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 元素填充有接收到的信息。
从现在开始可以选择一个列并可以传输表格。

在我的例子中有两条路线。 一个用于显示和处理表单，另一个根据请求以 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)

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

<!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 标签中获取选定的值

问题描述

1 个解决方案

解决方案1
0 2021-11-07 22:24:11

如何使用 Flask 从 html select 标签中获取选定的值

问题描述

1 个解决方案

解决方案1 0 2021-11-07 22:24:11

解决方案1
0 2021-11-07 22:24:11