Javascript python flask动态下拉列表

我有一个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>

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

部门：
{部门%中项目的%s}
{{item.Dept_name}
{%endfor%}

这是：DefaultAdminManageUsers.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>

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

部门：
{部门%中项目的%s}
{{item.Dept_name}
{%endfor%}
用户：
{users%%中的用户为%s}
{{user.name}
{%endfor%}

put请求部分的尝试失败 主要问题是处理来自同一html模板的两个post请求 或者以某种方式使下拉列表动态化

---

就像部门发生了变化一样，其他下拉列表中的用户也发生了变化

您可以通过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

要使其工作，您需要一个脚本来监视department下拉列表中的更改。当从该列表中选择一个值时，您希望使用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>

部门：
{部门%中项目的%s}
{{item.Dept_name}
{%endfor%}

注意，我已经删除了表单。然后，将发出请求的函数：

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

document.getElementById（'departments'）。onchange=function（）{
var department_id=此值；
var csrf_token=“{{csrf_token（）}}”；
$.ajaxSetup({
发送前：功能（xhr、设置）{
if（！/^（获取| HEAD | OPTIONS | TRACE）$/i.test（settings.type）和&！this.crossDomain）{
setRequestHeader（“X-CSRFToken”，csrf_token）；
}
}
});
$.ajax({
键入：“POST”，
数据：JSON.stringify({
“部门id”：部门id，
}),
contentType:'application/json；charset=utf-8'，
url:“{url\'for（'get\'u user\'u list'）}}”，
成功：功能（数据）{
$（“#用户”）.empty（）；
对于（变量i=0；i