Python 模板覆盖 JavaScript 函数

Question

我有一个按钮，可以将表单提交到 Flask 服务器并运行 JS 函数。当按下按钮时，JS 函数就会运行，然后它会被 Flask render_template 函数覆盖*。我需要在服务器端处理完成后隐藏表单并取消隐藏分析 div。

HTML：

<div id="index">
    <form action="/analyse" method="post">
        <!-- Form and button --!>
        <input id="fileupload" type="file" accept=".xlsx, .xls" name="fileupload" />
        <input type="submit" class="button" value="Send to Server" onclick="hide()"/>
    </form>
</div>

<div id="analyse" class="hidden">
    <!-- The hidden items that will be visible after the submittion of the form --!>
</div>

JS按钮功能：

// Function hides the form and unhides the 'analyse' div
// Another function reverses hide() function
function hide() {
    var index = document.getElementById('index');
    var analyse = document.getElementById('analyse');
    index.classList.add('hidden');
    analyse.classList.remove('hidden');
}

服务器端Python：

@app.route('/', methods=['GET','POST'])
def index():
    return render_template('index.html')

@app.route('/analyse', methods=['GET','POST'])
def analyse():
    # Validation and functions, etc.
    return render_template('index.html')

*JS 应该隐藏表单，但是 python 让它重新出现并再次隐藏分析 div（这就是我所说的覆盖）。

Answer 1

我创建了 2 个文件：index.html 和 analysis.html，每个文件都会显示，而不是隐藏和显示 div，这意味着不需要 JavaScript。

index.html：

<div id="index">
    <form action="/analyse" method="post">
        <!-- Form and button --!>
        <input id="fileupload" type="file" accept=".xlsx, .xls" 
        name="fileupload" />
        <input type="submit" class="button" value="Send to Server" 
        onclick="hide()"/>
    </form>
</div>

analysis.html：

<div id="analyse" class="hidden">
    <!-- The hidden items that will be visible after the submittion of the form --!>
</div>

Python：

@app.route('/', methods=['GET','POST'])
def index():
return render_template('index.html')

@app.route('/analyse', methods=['GET','POST'])
def analyse():
//Validation and functions, etc.
return render_template('analyse.html')