按下按鈕後防止表單重新提交

我在這裏處於一種微妙的情況。在我的組織中，我們設計了庫存管理系統，它是一個基於JSP頁面和處理它們的servlet的Web應用程序。按下按鈕後防止表單重新提交

我被要求解決一個特定的問題。我們有一個帶有HTML表格表格的JSP頁面，其中有股票細節。當用戶手動輸入詳細信息並提交表單時，庫存詳細信息在數據庫中更新並且工作正常。

問題是這樣的：當用戶按下瀏覽器的返回按鈕時，用戶可以到他提交細節的上一頁。當用戶提交時，數據再次保存到數據庫中。我需要防止這種行爲（類似於清除並重新加載頁面）。

我到目前爲止所做的事情：清除瀏覽器緩存。代碼工作正常但不是預期的結果。

不幸的是，由於公司法規的限制，我無法分享代碼。我需要的是幫助防止此行爲或解決方法。

在此先感謝..

來源

2017-09-12 Lucy Ferrier

我知道你不能共享確切的代碼，但有你能概括你的代碼，使其無法公司具體的方法嗎？ – Michael

我很抱歉邁克爾，但它是一個複雜的代碼，我不知道你想要什麼相關的部分。謝謝回覆。 –

您可以在隱藏屬性的幫助下使用javascript函數重新加載網頁。當用戶按下後退按鈕的基礎上，隱藏屬性的值，頁面將無需加載緩存的頁面重新加載。

你清除緩存的做法是正確的。再加上那個，你可以使用這種方法。這種方法的

<input type="hidden" id="refreshed" value="no"> 
    <script type="text/javascript"> 

      onload=function(){ 
       var e=document.getElementById("refreshed"); 
       if(e.value=="no")e.value="yes"; 
       else{e.value="no";location.reload();} 
      } 

    </script>

一個缺點是，如果你的客戶的瀏覽器禁用了JS，這不會work.Otherwise它應該工作。

來源

2017-09-13 08:31:26

感謝您的回答。將嘗試並讓你知道:) –

試驗你的建議，並使其工作。謝謝！ –

必須使用郵政重定向的獲取方式：https://en.m.wikipedia.org/wiki/Post/Redirect/Get。

實際上，每個使用標準HTML表單的應用都應該使用method="post"。它對AJAX發佈的表單沒有任何用處，它實際上可能是另一種解決方案，但需要更多的工作並可能需要一些體系結構更改。

來源

2017-09-12 19:11:52 szczepanpp

感謝您的建議和資源。但恐怕我不會允許對現有的代碼做出重大改變。無論如何，我會盡力向我的上司解釋，如果沒有其他的東西:) –

其實，它應該是非常直截了當的。對於無效輸入，您不會更改任何內容 - 用戶將看到一個頁面，顯示錯誤消息，如果他重新提交表單 - 它只會顯示相同的驗證錯誤。不過，對於成功提交，您將執行重定向而不是呈現頁面。重定向到確認頁面是一種很好的做法，因此用戶知道他的行爲確實成功了（可能是您的案例中的一項額外工作），但您也可以簡單地重定向到同一頁面。 – szczepanpp

當用戶按下瀏覽器的後退按鈕時，用戶可以前往上一頁，他提交了詳細信息。當用戶提交時，數據再次保存到數據庫。

根據你如何描述它，這是基於doGet請求。這意味着每次訪問該URL時，都會發送添加了任何參數的請求。

正如有人已經提到的，如果你形式切換到POST方法和Servlet的切換到的doPost，你不會有這個問題了。

另外，你也可以用javascript解決方案規避這個問題。以下是一些選項：

您可以檢查用戶clicked the back button，如果爲true，則禁用表單。
另一種方式是通過storing a cookie您檢查頁面加載，如果存在的話，你可以禁用的形式。

來源

2017-09-12 21:42:17

同樣的事情發生在Android 6上的Firefox的'POST'表單中。您可以使用表單回到頁面，並且它已經填充，因此您可以再次提交它。 – szczepanpp

謝謝喬納森我會嘗試你的建議，並讓你知道結果。 –

您可以使用此代碼也

$(document).ready(function() { 
    function disableBack() { window.history.forward() } 

    window.onload = disableBack(); 
    window.onpageshow = function(evt) { if (evt.persisted) disableBack() } 
});

來源

2018-01-20 10:33:20 Romi

按下按鈕後防止表單重新提交

回答

相關問題