python - Python Flask Web 应用程序 - 多行输入选项
问题描述
我正在构建一个 Flask 应用程序,它有一个文本框,允许用户输入域名并使用按钮提交表单(搜索结果显示在搜索框下方的 HTML 中)。我想使用textarea输入框一次支持多个域输入。如何使用按钮在使用文本框输入和基于用户选择的按钮的文本区域之间切换表单(或使用单独的表单)?以及如何从相关框中获取输入并在 python 中处理它?
解决方案
您可以依靠单行输入并根据jquery
需要不断添加新域:
app.py
:
import flask
app = flask.Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def home():
return flask.render_template('get_domains.html')
@app.route('/add_domain')
def add_domain():
_domains = flask.request.args.getlist('domains[]')
return flask.jsonify({"success":"true"})
#do something with domains
在get_domains.html
中,用于jquery
获取所有条目并ajax
与/add_domain
路由通信:
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</header>
<body>
<div class='outer'> <!--Used to anchor jquery updates -->
<div class='input_section'></div>
<button class='add_domain'>Add domain</button>
</div>
</body>
<script>
$(document).ready(function(){
var count = 1;
var button_count = 0;
$('.outer').on('click', '.add_domain', function(){
var new_html = `
<input type='text' name='domain' id='domain${count}'>
<div class='spacer' style='height:10px;'></div>
`
$('.input_section').append(new_html);
count += 1;
if(button_count == 0){
$('.outer').append('<button class="submit_data" id="submit_stuff">Add all</button>')
button_count += 1;
}
});
$('.outer').on('click', '.submit_data', function(){
var results = [];
for (var i = 1; i < count; i++){
results.push($('#domain'+i.toString()).val());
}
$('.input_section').html('');
$('#submit_stuff').remove();
count = 1;
button_count = 0;
$.ajax({
url: "/add_domain",
type: "get",
data: {domains: results},
success: function(response) {
//pass
},
error: function(xhr) {
//pass
}
});
});
});
</script>
</html>
结果:
推荐阅读
- angular - 无法在打字稿中设置未定义的属性(已定义)
- python-3.x - Python Pydantic 双基模型
- scala - Scala:路径相关类型上的模式匹配
- php - Vue CLI+Laravel Api 请求/响应 400 错误请求
- visual-studio-code - ctrl-e 在 Visual Studio 代码中的两个文件之间切换
- php - 在“支付订单”页面 Woocommerce 上保存账单和运输字段数据
- kotlin - KOTLIN:如何为函数中的泛型类型参数分配默认值?
- octave - 增量搜索方法脚本错误
- mysql - MySQL随着时间的推移价格变化最大
- c# - 使用 PlayerPrefs 浮动使数组的某个元素可交互,同时所有 +1 元素保持锁定