在 form.submit 之后显示结果的 Javascript onclick 事件

Question

我构建了一个烧瓶应用程序，它应该在通过过滤器后显示数据框。为此，我使用 Flask-WTF 创建了一个表单来请求特定的过滤器，然后应用它。我需要在提交表单时显示数据框结果。所以我将数据框结果的可见性设置为隐藏，并添加了一个事件 onclick {{ form.submit(onclick="showResult()") }}。但是当我点击提交按钮时，结果会短暂出现，然后在表单加载完成后消失。代码如下：

server.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)

index.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 上的可见性样式不存在？

Answer 1

1. 您的表单没有 action 属性，因此不确定您的表单被提交到哪里进行处理。

2. 表单提交会重新加载页面。您当前的代码所做的是首先使数据框可见，然后提交强制页面重新加载的表单，因此您的数据框恢复为不可见状态。

3. 解决方案是异步调用提交表单，即当用户点击提交表单时，拦截提交动作并阻止默认提交，然后使用您的异步代码提交表单，处理返回的结果，然后制作数据框可见。您可以构建的示例代码

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'
    })
 }