Comment la publication/redirection/obtention (PRG) peut-elle empêcher les resoumissions indésirables de formulaires lors de l'actualisation de la page ?

Empêcher la resoumission du formulaire lors de l'actualisation de la page avec Post/Redirect/Get

Dans cette situation, où l'actualisation de la page entraîne des resoumissions involontaires de formulaires, le modèle Post/Redirect/Get (PRG) offre une solution efficace. Examinons sa mise en œuvre.

Une fois le formulaire soumis, le serveur exécute les étapes suivantes :

1. Post : Le navigateur envoie les données du formulaire au serveur.
2. Redirection : Le serveur traite les données et émet une redirection vers un autre page.
3. Obtenir : Le navigateur récupère la nouvelle page, effaçant ainsi les données du formulaire.

En redirigeant l'utilisateur après la soumission du formulaire, le GET implicite du navigateur la demande d'actualisation de la page ne contient aucune donnée de formulaire, ce qui empêche une nouvelle soumission.

Cependant, il est crucial d'éviter d'utiliser le bouton Retour car il pourrait remplir à nouveau le formulaire avec les données précédemment soumises. Pour une expérience utilisateur fluide, assurez-vous que la nouvelle page indique clairement que les données ont été soumises avec succès.

Approche Javascript utilisant window.history.replaceState

As mentionné dans la réponse, une approche alternative consiste à utiliser la méthode window.history.replaceState de JavaScript :

if (window.history.replaceState) {
    window.history.replaceState(null, null, window.location.href);
}

Ce script modifie le l'historique du navigateur, en remplaçant l'entrée actuelle par une nouvelle sans déclencher une actualisation de la page. Cependant, il est important de noter que cette approche n'est peut-être pas aussi fiable que le modèle PRG.

En fin de compte, le modèle PRG reste une solution robuste pour empêcher les resoumissions de formulaire lors de l'actualisation de la page, tout en conservant l'URL d'origine du formulaire et en fournissant une expérience conviviale.

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!