javascript - 在 form.submit 之后显示结果的 Javascript onclick 事件
问题描述
我构建了一个烧瓶应用程序,它应该在通过过滤器后显示一个数据框。为此,我使用 Flask-WTF 创建了一个表单来请求特定的过滤器,然后应用它。我需要在提交表单时显示数据框结果。所以我将数据框结果的可见性设置为隐藏并添加了一个事件 onclick {{ form.submit(onclick="showResult()") }}
。但是当我点击提交按钮时,结果会短暂出现,然后在表单加载完成后消失。这是代码:
服务器.py
def get_df():
df = pd.DataFrame({'A': [0, 1, 2, 3, 4],
'B': [5, 6, 7, 8, 9],
'C': ['a', 'b', 'c', 'd', 'e']})
return df
@app.route('/', methods=("POST", "GET"))
def index():
df_result = get_df()
form = NameForm()
message = ""
if form.validate_on_submit():
name = form.name.data
df_result = df_result.loc[df_result['C']==name]
message = 'your input is ' + name
return render_template('index.html', tables=[df_result.to_html(classes='data', header="true")], form=form, message=message)
索引.html
{% extends 'layout.html' %}
{% block content %}
<form method=post>
{{ form.csrf_token }}
{{ form.name }}
{{ form.submit(onclick="showResult()") }}
</form>
<p class="pt-5"><strong>{{ message }}</strong></p>
<div id="result" style="visibility:hidden;">
{% for table in tables %}
{{ table|safe }}
{% endfor %}
</div>
{% endblock %}
javascript.js
function showResult()
{
document.getElementById('result').style.visibility = 'visible'
}
您能否帮助弄清楚为什么 javascript 上的可见性样式不会持续存在?
解决方案
您的表单没有操作属性,因此不确定您的表单将在哪里提交以进行处理。
表单提交会重新加载页面。您当前的代码所做的是首先使数据框可见,然后提交强制页面重新加载的表单,因此您的数据框恢复为不可见状态。
解决方案是进行异步调用以提交您的表单,即当用户单击提交您的表单时,拦截提交操作并阻止默认提交,然后使用您的异步代码提交表单,处理返回的结果,然后使数据框可见. 您可以构建的示例代码
function showResult(e){
// Stop the default form submission
e.preventdefault()
// Make a POST request to your server sending the form
fetch("/",{ method: "POST", body: new FormData(document.querySelector('form')})
.then(function(result) { // This is the response from the server
return result.json();
})
.then(function(data){
// Process the returned data
......
// Make your frame visible
document.getElementById('result').style.visibility = 'visible'
})
}
推荐阅读
- c# - 从注入 DI 的 IHttpClientFactory 获取名称 HttpClient
- sql - 如何获取时间范围内的客户数量和总额?
- vba - 多个条件 IF 语句继续下一个用户表单
- sql - 错误:从 asp.net 中的存储过程获取值时,对象引用未设置为对象的实例
- java - 合并两个 PriorityQueue 的时间复杂度(Big-O)
- r - 从 2 个数据帧中提取日期时间对象并重新格式化它们
- azure-communication-services - Azure 通信服务与 MS BOT 框架之间的集成
- c - 如果条件无法正常运行
- jekyll - 如何用 Liquid 注入变量?
- django - 如何在 Ajax 中接受包含 csv 文件的 django.http.HttpResponse 对象?