得到确认页面后点击浏览器返回按钮答案

【问题标题】：Clicking the browser back button after getting the confirmation page得到确认页面后点击浏览器返回按钮
【发布时间】：2020-08-05 10:10:10
【问题描述】：

我有一个页面，我必须在其中填写学生详细信息，例如姓名、电子邮件和部门。填写详细信息并单击submit my button 后，它会转到下一页，并在下一页显示输入的学生详细信息。

这里我已经一步步展示了代码。

输入详细信息并点击提交按钮后的以下代码。

<div class="top-space-20">
    <input class="btn btn-info" type="button" onclick="submitEvent()" class="btn" value="submit my details">
</div>

这是单击提交我的详细信息按钮的脚本代码。

function submitEvent() {
    form = document.createElement("form");
    form.method = "POST";
    form.action = "/confirmation";
}

单击按钮后，它会转到后端并获取一些详细信息，然后显示confirmation.html 页面。

@app.route("/confirm",methods=['GET','POST'])
def confirm():
    "Confirming the event message"
    response_value = request.args['value']

    return render_template("confirmation.html", value=json.loads(response_value))

@app.route("/confirmation", methods=['GET', 'POST'])
def ssubmit_and_confirm():
    "submit an event and display confirmation"

    if request.method == 'POST':       
        return redirect(url_for('confirm', value=value))

下面的代码是confirmation.html页面

<body style="background-color:powderblue;">
    <div class="panel panel-default" style="max-width:1000px;max-height: 800px;margin-left:auto;margin-right:auto;">
        <div class="panel-heading " style="text-align: center;">submit student details</div>
        <div class="panel-body" id="resultDiv">
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <label class="col-md-8" for="Date:">Date:
                            {{ value }}</br> Time :{{value}}</label>
                        <label class="col-md-8" for="dateApplied"></label>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <label class="col-md-8" for="student email:">
                            student email id:{{value}}</label>
                    </div>
                </div>   
        </div>
    </div>
</body>

所以这里的问题是，一旦我来到confirmation.html，如果我点击浏览器的后退按钮，它就会转到表单，它让我可以添加相同的详细信息。

为了避免这种情况，我尝试在 confirmation.html 中包含这一行

</div>
<div><input type="hidden" id="reloadPage" /></div>
<script type="text/javascript">
    $(document).ready(function() {
        function reloadPage(){
            location.reload(true); ;    // RELOAD PAGE ON BUTTON CLICK EVENT.

            // SET AUTOMATIC PAGE RELOAD TIME TO 5000 MILISECONDS (5 SECONDS).
            var timerId = setInterval('refreshPage()', 5000);
        }
    });
    function refreshPage() { clearInterval(timerId); location.reload(); }
</script>

但它不起作用。我尝试了链接中给出的另一种方法 How to stop re submitting a form after clicking back button

这也不行。

所以我需要的是，如果我点击浏览器中的后退按钮，我应该只显示确认页面，或者它应该告诉这不是授权页面。

【问题讨论】：

标签： javascript python jquery flask jinja2

【解决方案1】：

第 1 步：在表单提交页面，初始设置表单提交值为false。

sessionStorage.setItem('form-submit', false)

第 2 步：在上一页提交表单时，请检查：

function submitEvent() {
    formSubmitted = sessionStorage.getItem('form-submit')

    if (!formSubmitted){
        // Write your code here
    }
}

第 3 步：在confirmation.html页面，你可以在sessionStorage中存储一个提交值。

sessionStorage.setItem('form-submit', true)

【讨论】：

【解决方案2】：

存储表单数据并在表单数据发送到服务器之前重置表单。假设您使用 $.ajax() 提交表单。

function submitEvent() {
    form = document.createElement("form");
    form.method = "POST";
    form.action = "/confirmation";

    // Add id attribute to the form
    form.id = "student_details_form";

    // Collect form data

    // reset your form just before calling $.ajax() or $.post()
    document.getElementById('student_details_form').reset();

    // call $.ajax() or $.post()
    $.ajax({
        url: form.action,
        // snipps
    };

}

【讨论】：

【解决方案3】：

您可以添加 HTML5 历史 API。使用以下代码。

name = document.title
history.pushState(null,name,name)//add this code in your configuration.html file in document ready block
$(window).on("popstate",()=>{
   //....Do whatever you want
   /*If you want to display unauthorized page then
   $(document).html("Unauthorized page")
   */
})

【讨论】：