Python Flask动态下拉菜单

Question

我有一个Flask应用程序，我希望在其中一个页面上打开两个下拉列表。第一个是部门，第二个是用户。我希望在同一页面中更改部门时动态更改用户。 我无法使用Post请求，因为我需要下一步进行Post请求以获取用户的特定详细信息以下是我的尝试

@app.route('/ITMODE/Users/', methods=['GET',  'POST'])
@login_required
def UserModifier():
        if Session.get('user_id') is None or Session['dept_id']!=1:
            return redirect(url_for('login'))
        else:
            if request.method == 'GET':
                departments= session.query(Department)
                #UserRequests= session.query(Requests).order_by(desc(Requests.Record_Created)).all()
                return render_template('DefaultAdminSelectDepartment.html', title='Users' ,dept=departments)
            else:
                department_id = request.form.get('departments')
                Session['department_id']=department_id
                return redirect(url_for('UserModifierDept'))

@app.route('/ITMODE/Users/departments/', methods=['GET',  'POST'])
@login_required
def UserModifierDept():
        if Session.get('user_id') is None or Session['dept_id']!=1:
            return redirect(url_for('login'))
        else:

            if request.method == 'GET':
                department = Session['department_id']
                departments= session.query(Department)
                Users=session.query(User.name).filter(User.dept_id==department).order_by(User.name)
                return render_template('DefaultAdminManageUsers.html', title='Users' ,users=Users,dept=departments)

这是:DefaultAdminSelectDepartment.html的主要部分

    <br>
    <form method="POST">
      <label for="departments">Departments : </label>
      <select name="departments" id="departments"  onchange='this.form.submit()' onfocus="this.selectedIndex = -1;">
        {% for item in dept %}
        <option value="{{ item.id }}">{{item.Dept_name}}</option>
        {% endfor %}
      </select>
      <noscript><input type="submit" value="Submit"></noscript>
      </form>

这是DefaultAdminManageUsers.html的主要部分：

 <form method="PUT">
      <label for="departments">Departments : </label>
      <select name="departments" id="departments"  onchange='this.form.submit()' onfocus="this.selectedIndex = -1;">
        {% for item in dept %}
        <option value="{{ item.id }}">{{item.Dept_name}}</option>
        {% endfor %}
      </select>
      <noscript><input type="submit" value="Submit"></noscript>
      </form>
      <form method="POST">
        <label for="users">Users : </label>
        <select name="users" id="users"  onchange='this.form.submit()' onfocus="this.selectedIndex = -1;">
          {% for user in users %}
          <option value="{{ user.id }}">{{user.name}}</option>
          {% endfor %}
        </select>
        <noscript><input type="submit" value="Submit"></noscript>
        </form>

PUT请求部分是一次失败的尝试，主要问题在于处理来自同一HTML模板的两个POST请求，或者以某种方式使下拉菜单动态化，使得如果部门更改，则其他下拉菜单中的用户也会更改。

- abdelrahman khalil

Answer 1

你可以通过POST请求来实现这个，但不能通过传统表单方式。我无法提供一个经过验证的可行示例，因为需要进行太多测试。然而，有几件事情是必须的。

首先，你需要一个助手函数来根据部门过滤用户列表。

@app.route('ITMODE/Users/get_user_list', methods=['POST'])
def get_user_list():

    req = request.json
    department_id = req.get('department_id')
    users = (session.query(User.name)
                    .filter(User.dept_id==int(department_id)
                    .order_by(User.name)
                    .all()))
    return users

为了使此功能正常工作，您需要编写一个脚本来监视部门下拉列表的更改。当从该列表中选择某个值时，您希望使用AJAX触发POST请求并更新用户下拉列表。我不知道您是否使用了flask-csrf，但我已经包含了它（如果没有必要可以省略）。

您的第一个下拉列表将类似于：

<br> 
<label for="departments">Departments : </label>
<select name="departments" id="departments" onfocus="this.selectedIndex = -1;">
   {% for item in dept %}
   <option value="{{ item.id }}">{{item.Dept_name}}</option>
   {% endfor %}
</select>

请注意，我已经移除了表单。现在是会发起请求的函数：

<script>
document.getElementById('departments').onchange = function() {
    var department_id = this.value;

    var csrf_token = "{{ csrf_token() }}";

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrf_token);
            }
        }
    });

    $.ajax({
        type: 'POST',
        data: JSON.stringify({
            'department_id': department_id,
        }),
        contentType: 'application/json; charset=utf-8',
        url: "{{ url_for('get_user_list') }}",
        success: function(data) {
            $("#users").empty();
            for (var i = 0; i < data.length; i++) {
                $("#users").append('<option value="' + data[i].id + '">' + data[i].Dept_name + '</option>');
            }
        }
    });
}
</script>

- roganjosh