Comment JavaScript peut-il empêcher la resoumission du formulaire lors de l'actualisation de la page ?

Empêcher la resoumission du formulaire lors de l'actualisation de la page

Lorsque les utilisateurs soumettent un formulaire, il est essentiel d'empêcher que les données soient soumises à nouveau lorsque la page est rafraîchi. Cela garantit l'intégrité des données et l'expérience utilisateur.

Une méthode efficace consiste à utiliser la fonction JavaScript window.history.replaceState(). Cette fonction met à jour l'entrée actuelle de l'historique avec une nouvelle URL et un nouvel objet d'état, nous permettant de remplacer l'URL actuelle par elle-même. Par conséquent, lorsque l'utilisateur actualise la page, il reste sur la même page au lieu de soumettre à nouveau le formulaire.

Mise en œuvre :

Ajoutez le code JavaScript suivant à votre page :

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

Lorsque la page se charge, ce script vérifie si le La fonction window.history.replaceState() est prise en charge par le navigateur. Si tel est le cas, il met à jour l'entrée actuelle de l'historique avec la même URL, empêchant ainsi toute nouvelle soumission lors de l'actualisation.

Remarque :

Bien que cette approche JavaScript puisse être efficace, elle est Il est recommandé d'utiliser une approche côté serveur telle que Post/Redirect/Get (PRG) pour garantir l'intégrité des données dans tous les scénarios. Cependant, cette solution offre une nouvelle alternative utilisant JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!