我有一个 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>
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
为此,您需要一个脚本来监视部门下拉列表中的更改。当从该列表中选择一个值时,您希望使用 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>
关于javascript - python Flask 动态下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59486881/