刷新Flask Web应用程序页面时提交先前选择的HTML表单答案

【问题标题】：Html form submitting previous choice when I refresh page of Flask web app刷新Flask Web应用程序页面时提交先前选择的HTML表单
【发布时间】：2019-06-11 21:26:06
【问题描述】：

在我的 Flask 应用程序中，我有一个简单形式的 POST 类型和 4 个同名的单选按钮选项。当我选择一个选项并按“下一步”（提交类型的输入）时，会加载一个新页面，其中包含不同的内容但类型相同的表单。

问题是，如果我刷新新加载的页面，提交的表单会使用与之前选择的选项具有相同值的选项。

表格：

<form id="myForm" name="myForm" method="post" >
    <table align="center" cellpadding="10" border="0" style="background-color: antiquewhite;">
        <tr>
            <td rowspan="2"><h3>Is this an <i>origin</i> for the <i>claim?</i></h3></td>
            <td><input type="radio" name="op" id="op1" value="1" >Yes</td>
            <td><input type="radio" name="op" id="op2" value="2" >No</td>
            <td rowspan="2"><input type="submit" value=Next></td>
        </tr>

        <tr>
            <td><input type="radio" name="op" id="op3" value="3" >Invalid Input</td>
            <td><input type="radio" name="op" id="op4" value="4" >Don't Know</td>
        </tr>
    </table>
    </form>

处理表单的 Python 代码片段：

if request.method == 'POST':
            op = request.form.get('op')
            if op:
                if op in ['1', '2', '3', '4']:
                    save_annotation(session.get('claim'),session.get('origin'), op, name)
                    c_url, o_url = get_least_annotated_page(name, session['claim'])

            else:
                c_url = session['claim']
                o_url = session['origin']

else:
    print("NOT POST AND LOGGED IN")
    c_url, o_url = get_least_annotated_page(name)
.
.
.
.
.
return render_template('index.html',t1=c_url, t2=o_url)

我只是希望能够在不发布表单的情况下刷新页面。

我已经尝试过使用

document.getElementById("myForm").reset();

还有

<body onload="document.myForm.reset();">

和

autocomplete="off"

此处提供完整代码（annotator.py、app/templates/index.html 和 app/templates/base.html）：

https://github.com/MohamedMoustafaNUIG/AnnotatorVM.git

EDIT:session 只是一个我用来存储东西的全局变量。 name 在 python 代码开头初始化，save_annotation() 和 get_least_annotated_page() 是函数。

EDIT2：加载新页面时，所有按钮均未选中。然而，当我刷新时，提交了一个选项。我只是通过查看命令行输出才注意到的。

【问题讨论】：

标签： javascript python html flask

【解决方案1】：

当您刷新页面时，浏览器将执行最后一个操作，在您的情况下为 POST。

避免这种情况的方法是将返回更改为重定向而不是渲染：

if request.method == 'POST':

    ...

    return redirect(url_for('this_view'))

...

Source

【讨论】：

不幸的是，因为我还必须传递一些参数（我没有把它们放在这里让它看起来更简单）我不能使用重定向。生病添加到我的问题。我也有一个想法，就是使用 window.onbeforeunload(){return} 来完全停止刷新。我会尝试一下，如果有效，我会发布答案。
我的想法没有奏效。我目前正在尝试发送一个在勾选选项时会发生变化的变量。服务器会比较新旧来判断这是刷新还是提交。

【解决方案2】：

你可以试试：

document.getElementById("op1").prop('checked', false)

这将取消选中单选按钮。每个人都可以这样做。

【讨论】：

新页面加载时该按钮未选中。加载新页面时，所有按钮都未选中。但是，如果我按下刷新（从浏览器），它会提交最后选择的按钮。如果我不看命令行，我不会注意到。
哦，我明白了。我想知道它是否与在 python 代码末尾返回 render_template("index.html") 有关。刷新页面时可能会发送旧版本？

【解决方案3】：

我找到了一个可行的解决方案。在我确定之前它可能需要更多测试，但目前它运行良好。

基本上，我会保留一个变量，当用户选择一个选项时该变量会递增。然后将存储在会话（服务器端）中的值与 POST 请求以表单发送的版本进行比较。如果相同，则为刷新，否则为正常提交。

代码：

客户端 (index.html)::

<form method="post">
    <table align="center" cellpadding="10" border="0" style="background-color: antiquewhite;">
        <tr>
            <td rowspan="2"><h3>Is this an <i>origin</i> for the <i>claim?</i></h3></td>
            <td><input type="radio" name="op" id="op1" onchange="incAlpha();" value="1" >Yes</td>
            <td><input type="radio" name="op" id="op2" onchange="incAlpha();" value="2" >No</td>
            <td rowspan="2"><input type="submit" value=Next></td>
        </tr>

        <tr>
            <td><input type="radio" name="op" id="op3" onchange="incAlpha();" value="3" >Invalid Input</td>
            <td><input type="radio" name="op" id="op4" onchange="incAlpha();" value="4" >Don't Know</td>
        </tr>
    </table>
        <input type="hidden" id="alpha" name="alpha" value={{alpha}}>
    </form>
<script type="text/javascript">
    var globFlag=true; // use so that the incrementation is only triggered once every page load
    function incAlpha()
    {
        if(globFlag)
        {
            let value= document.getElementById("alpha").value;
            document.getElementById("alpha").value = (parseInt(value)+1)%10;
            globFlag=false;
        }
    }
</script>

Python（Flask）代码：

name = session.get('username')
        alphaFromSession = session.get('alpha')
        if request.method == 'POST':
            op = request.form.get('op')
            alphaFromClient = request.form.get('alpha')
            if op and not (alphaFromSession == alphaFromClient):
                if op in ['1', '2', '3', '4']:
                    save_annotation(session.get('claim'),session.get('origin'), op, name)
                    session['alpha']=alphaFromClient
                    c_url, o_url, src_lst, donePg, totalPg, done, total = get_least_annotated_page(name, session.get('claim'))


.
.
.
.
return render_template('index.html',t1=c_url, t2=o_url,alpha=session.get('alpha'))

【讨论】：