0

如何将javascript变量传递给烧瓶？

我有一个用几个 SelectFields 创建的 Flask 表单，在更改事件时，我使用 JavaScript 来捕获选定的值并在提交表单之前存储在全局变量中。如何传递在节内捕获的这个全局变量值。

我正在学习和试验 Flask、Python 和 JavaScript 编程。

我创建了一个 Flask 表单来获取用户选择的选项列表值，并且还有提交按钮。为了创建一个依赖的选择字段，我正在编写关于更改函数的 JavaScript，并希望在提交到 Flask 之前传递这个选定的字段值，以便我可以根据传递的值过滤到数据库中以获取下一个选择列表值。

烧瓶代码：

@app.route("/userForm", methods=['GET', 'POST']) 
def userForm(): 
    data = pd.read_excel('DataFile.xlsx', sheet_name='Sheet1')

    form = UserForm()  
    
    form.company.choices = [("", "---")]+[(company, company) for company in data.Company.unique()]
    form.dept.choices = [("", "---")]+[(dept, dept) for dept in data.Department.unique()]   

    return render_template('UserForm.html', data=data, form=form)

带有 javaScript 代码的 UserForm.html

{% extends "layout.html" %}
{% block content %}  
    <div class="content-section">
        <form method="POST" action="/api">
            <!-- Below tag is important to validate on submit message -->
            {{ form.csrf_token }} 
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Agent Assignment</legend>
                <div class="form-group">
                    {{ form.company.label(class="form-control-label") }}
                    {{ form.company(class="form-control form-control-lg") }} 
                </div>
                <div class="form-group">
                    {{ form.dept.label(class="form-control-label") }}
                    {{ form.dept(class="form-control form-control-lg") }} 
                </div> 
            </fieldset>
            <div class="form-group">
                {{ form.submit(class="btn btn-outline-info")}}
            </div>
        </form> 
    </div> 
    <script>
        const company = document.querySelector('#company');
        const dept = document.querySelector('#dept'); 

        let selectedCompany = '';
        let selectedDept = '';  

        company.addEventListener('change', (e) => {
            selectedCompany = e.target.value; 
        });

        dept.addEventListener('change', (e) => {
            selectedDept = e.target.value; 
        });
    </script>
{% endblock content %}

我希望在 UI 中提交之前将 selectedCompany、selectedDept 全局变量值（在更改事件上）放入我的 Flask userForm() python 函数中。

我不知道如何从 JavaScript 在 Flask 中获取它。请建议。

4

0 回答 0