python - 将尚未提交的html搜索框字符串传递给python烧瓶
问题描述
我有一个 html 搜索框。如果用户敲击键盘,我想将这个尚未提交的变量传递给 python 烧瓶。我不知道如何处理这个。第一个代码是 html 搜索框部分,第二个代码是 python 烧瓶代码。
<br> <input name="Country" type="text" id="Country" placeholder="Enter Country" oninput="myFunction()"/> oninput: <span id="result"></span>
<script>
function myFunction() {
// result.innerHTML = Country.value;
result.innerHTML = output;
};
</script>
@auth.route('/search', methods=['POST'])
def autoComplete():
country = request.form[Country.value]
output = autoCompletion.init(country)
return render_template("search.html", output=output)
有没有办法将尚未提交给python烧瓶的html搜索框字符串传递给?任何帮助将不胜感激。
解决方案
这是一个使用 AJAX 而无需提交表单的简单示例。
随着表单字段中的每次更改,都会在后台向服务器发送一个请求。然后将接收到的数据添加到分配给表单域的数据列表中。
@app.route('/')
def index():
return render_template('index.html')
@app.route('/complete')
def complete():
countries = ['China', 'India', 'USA']
country = request.args.get('country', '')
results = [x for x in countries if x.startswith(country)]
return jsonify(results=results)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="text" name="country" list="countries" placeholder="Enter Country" />
<datalist id="countries"></datalist>
</form>
<script type="text/javascript">
(function() {
let countryField = document.querySelector("input[name='country']");
countryField.addEventListener('input', function(event) {
fetch(`/complete?country=${encodeURIComponent(countryField.value)}`)
.then(resp => resp.json())
.then(data => {
const dataList = document.getElementById("countries");
dataList.innerHTML = "";
const results = data.results;
results.forEach(item => {
let elem = document.createElement("option");
elem.setAttribute("value", item);
dataList.appendChild(elem);
});
})
.catch(err => console.error("Error:", err));
}, false);
})();
</script>
</body>
</html>
代码当然可以改进,但它说明了在不重新加载页面或最终发送表单的情况下动态获取数据的可能性。
为了使您的工作更轻松,我建议使用 jQuery 等库。
推荐阅读
- java - Java SAP 通信
- vim - 二进制编辑
- java - Java 中的无限 do/while 循环。请指教
- javascript - 你将如何实现一个微调器组件来表明在 React 中有一个 http 请求的事实?
- node.js - openwhisk 操作/IBM Cloud Functions 中的第三方 npm 包
- php - Laravel / Eloquent - 无法执行原始查询
- java - java - 如何一次更新一个表状态?
- android - 在 Kotlin 中比较和替换两个不同大小的列表中的项目?
- python - sklearn OneHotEncoder 损坏-ValueError:无法将字符串转换为浮点数
- ios - GMSVisibleRegion 不包括填充 - 适用于 iOS 的 Google Maps SDK