javascript - 从 HTML 访问烧瓶变量
问题描述
应用程序.py
@app.route('/cma/connect', methods=['GET', 'POST'])
def connect_management():
user = request.form.get('all_classes')
print('user:', user)
return str(user)
@app.route('/')
def index():
return render_template('app.html',
all_classes=default_classes)
应用程序.html
<select name="selected_cma" class="form-control" id="all_classes">
{% for o in all_classes %}
<option value="{{ o }}" selected>{{ o }}</option>
{% endfor %}
</select>
</div>
<div class="form-group col-xs-3">
<label for="all_entries">the manager</label>
<button class="form-control" id="button" onclick="connect()">the reciever</button>
<p id="countdown"></p>
app.html 中的 js 代码
$('#button').click( function(event) {
event.preventDefault();
$.post("/cma/connect", $('#form').serialize(), function(data) {
//alert(data);
countdown = $("#countdown");
countdown.append(data + "<br/>");
});
});
我的结果
user: None
127.0.0.1 - - [19/Jun/2020 10:03:11] "POST /cma/connect HTTP/1.1" 200 -
我想要的是
user: (the selected option from the dropdown menu)
结束问题
我想将选定的选项返回到我的烧瓶 api 以供进一步使用并显示它而无需转到新的tab
有什么新方法吗?
解决方案
如果您不想<form>
在代码中使用(这很奇怪),那么您可以尝试
<script>
$('#button').click( function(event) {
event.preventDefault();
var selected = $("#all_classes :selected").val();
alert("selected: " + selected);
$.post("/ra/connect", {"selected_cma": selected}, function(data) {
//alert(data);
countdown = $("#countdown");
countdown.append(data + "<br/>");
});
});
</script>
休息应该是一样的。
JavaScript
发送{"selected_cma": selected}
所以Flask
必须使用相同的名称form.get('selected_cma')
@app.route('/cma/connect', methods=['GET', 'POST'])
def connect_management():
user = request.form.get('selected_cma')
print('user:', user)
return str(user)
和
<select name="selected_cma" class="form-control" id="all_classes">
{% for o in all_classes %}
<option value="{{ o }}" selected>{{ o }}</option>
{% endfor %}
</select>
</div>
<div class="form-group col-xs-3">
<label for="all_entries">the manager</label>
<button class="form-control" id="button">the reciever</button>
<p id="countdown"></p>
并且不需要onclick="onclick()"
,因为$('#button').click(...)
已经分配了功能。如果你有一些功能onclick()
,那么它可能会产生一些其他问题。
编辑:
最少的工作代码
from flask import Flask, request, render_template_string
app = Flask(__name__)
@app.route('/')
def index():
return render_template_string('''<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<select name="selected_class" class="form-control" id="all_classes">
{% for o in all_classes %}
<option value="{{ o }}" selected>{{ o }}</option>
{% endfor %}
</select>
<button class="form-control" id="button">Get gateways</button>
<p id="countdown"></p>
<script>
$('#button').click( function(event) {
event.preventDefault();
var selected = $("#all_classes :selected").val();
alert("selected: " + selected);
$.post("/ra/connect", {"selected_cma": selected}, function(data) {
//alert(data);
countdown = $("#countdown");
countdown.append(data + "<br/>");
});
});
</script>
</html>''', all_classes=['Hello', 'World'])
@app.route('/ra/connect', methods=['GET', 'POST'])
def connect_management():
print(request.form)
print(request.data)
user = request.form.get('selected_cma')
print('user:', user)
return str(user)
app.run()
顺便说一句:上一个问题:如何将选定的下拉菜单访问回烧瓶
推荐阅读
- java - 无法从 manifest.xml 中读取包名称
- java - 在 java 库中使用位图
- javascript - 过滤认为具有辅助号码的联系人
- install4j - 如何为动态捆绑 JRE 指定多个替代下载 URL
- javascript - 将 blob 渲染到弹出 div 而不是在新窗口中打开
- algorithm - 如何轻松比较由空间点组成的两条线?
- excel - 带有 VBA 按钮的 Excel 帮助,可添加带有下拉列表和公式的新行
- html - 下拉列表中的 MVC 占位符
- javascript - Angular中带有id参数的Rest api调用
- python - 使用 pool.map() 时防止复制字典