python flask动态下拉列表

Question

我有一个 Flask 应用程序，我希望在其中打开一个带有两个下拉列表的页面，第一个用于部门，第二个用于用户 我想在更改同一页面中的部门时动态更改用户

我无法使用发布请求，因为我接下来需要发出发布请求以获取用户的特定详细信息，这是我的尝试

@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>

放置请求部分是失败的尝试主要问题是处理来自同一 html 模板的两个发布请求，或者以某种方式使下拉列表动态化，就像部门更改了另一个下拉列表中的用户一样

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>