JavaScript はどのようにしてページ更新時のフォームの再送信を防ぐことができますか?

ページ更新時のフォームの再送信の防止

ユーザーがフォームを送信するとき、ページが更新されたときにデータが再送信されないようにすることが重要です。リフレッシュされました。これにより、データの整合性とユーザー エクスペリエンスが確保されます。

効果的な方法の 1 つは、JavaScript 関数 window.history.replaceState() を利用することです。この関数は、現在の履歴エントリを新しい URL と状態オブジェクトで更新し、現在の URL をそれ自体に置き換えることができます。その結果、ユーザーがページを更新すると、フォームを再送信するのではなく、同じページに留まります。

実装:

次の JavaScript コードをpage:

<script>
    if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
    }
</script>

ページが読み込まれると、このスクリプトはwindow.history.replaceState() 関数はブラウザーでサポートされています。存在する場合、同じ URL で現在の履歴エントリが更新され、更新時の再送信が効果的に防止されます。

注:

この JavaScript アプローチは効果的ですが、すべてのシナリオにわたってデータの整合性を確保するには、Post/Redirect/Get (PRG) などのサーバー側のアプローチを使用することをお勧めします。ただし、このソリューションは JavaScript を使用した新しい代替手段を提供します。

以上がJavaScript はどのようにしてページ更新時のフォームの再送信を防ぐことができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。